diff --git a/.changeset/nasty-pandas-taste.md b/.changeset/nasty-pandas-taste.md new file mode 100644 index 00000000000..bed977c73ce --- /dev/null +++ b/.changeset/nasty-pandas-taste.md @@ -0,0 +1,7 @@ +--- +'graphiql': major +--- + +Remove examples: `GraphiQL x Parcel` and `GraphiQL x Create React App` + +Add new examples: `GraphiQL x Vite` and `GraphiQL x Next.js` diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html index d62b9728b87..88816672c0c 100644 --- a/examples/graphiql-cdn/index.html +++ b/examples/graphiql-cdn/index.html @@ -14,7 +14,6 @@ - - - - Parcel React Example - - - - - -
- - - diff --git a/examples/graphiql-parcel/src/index.tsx b/examples/graphiql-parcel/src/index.tsx deleted file mode 100644 index d9116626d5b..00000000000 --- a/examples/graphiql-parcel/src/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { createRoot } from 'react-dom/client'; -import { GraphiQL } from 'graphiql'; -import type { Fetcher } from '@graphiql/toolkit'; -import { CSSProperties } from 'react'; - -const fetcher: Fetcher = async graphQLParams => { - const data = await fetch( - 'https://swapi-graphql.netlify.app/.netlify/functions/index', - { - method: 'POST', - headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', - }, - body: JSON.stringify(graphQLParams), - credentials: 'same-origin', - }, - ); - return data.json().catch(() => data.text()); -}; - -const style: CSSProperties = { height: '100vh' }; - -const App = () => ; - -const root = createRoot(document.getElementById('root')); -root.render(); - -// Hot Module Replacement -module.hot?.accept(); diff --git a/examples/graphiql-vite/README.md b/examples/graphiql-vite/README.md new file mode 100644 index 00000000000..a11f2cb0154 --- /dev/null +++ b/examples/graphiql-vite/README.md @@ -0,0 +1,8 @@ +# GraphiQL Vite Example + +This example demonstrates how to use GraphiQL with Vite. + +## Setup + +1. `yarn dev` to start Vite dev server. +1. `yarn build` to build production ready transpiled files. Find the output in `dist` folder. diff --git a/examples/graphiql-vite/index.html b/examples/graphiql-vite/index.html new file mode 100644 index 00000000000..80605d777de --- /dev/null +++ b/examples/graphiql-vite/index.html @@ -0,0 +1,33 @@ + + + + + + + GraphiQL Vite Example + + + + +
+
Loading…
+
+ + + diff --git a/examples/graphiql-vite/package.json b/examples/graphiql-vite/package.json new file mode 100644 index 00000000000..0bf15b8bf83 --- /dev/null +++ b/examples/graphiql-vite/package.json @@ -0,0 +1,20 @@ +{ + "name": "example-graphiql-vite", + "version": "0.0.0", + "private": true, + "dependencies": { + "graphiql": "^4.1.0", + "graphql": "^16.11.0", + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.4.1", + "vite": "^6.3.4" + }, + "scripts": { + "dev": "vite", + "build": "vite build", + "start": "vite preview" + } +} diff --git a/examples/graphiql-vite/public/favicon.svg b/examples/graphiql-vite/public/favicon.svg new file mode 100644 index 00000000000..29a8fdc208b --- /dev/null +++ b/examples/graphiql-vite/public/favicon.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + diff --git a/examples/graphiql-vite/src/App.jsx b/examples/graphiql-vite/src/App.jsx new file mode 100644 index 00000000000..9a7176aa4f7 --- /dev/null +++ b/examples/graphiql-vite/src/App.jsx @@ -0,0 +1,21 @@ +import { GraphiQL } from 'graphiql'; +import 'graphiql/setup-workers/vite'; +import 'graphiql/style.css'; + +async function fetcher(graphQLParams) { + const response = await fetch('https://graphql.earthdata.nasa.gov/api', { + method: 'POST', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(graphQLParams), + }); + return response.json(); +} + +function App() { + return ; +} + +export default App; diff --git a/examples/graphiql-create-react-app/src/index.jsx b/examples/graphiql-vite/src/index.jsx similarity index 54% rename from examples/graphiql-create-react-app/src/index.jsx rename to examples/graphiql-vite/src/index.jsx index 16e6dbd33a2..78cad336875 100644 --- a/examples/graphiql-create-react-app/src/index.jsx +++ b/examples/graphiql-vite/src/index.jsx @@ -1,6 +1,5 @@ import { createRoot } from 'react-dom/client'; import App from './App'; -import './index.css'; -const root = createRoot(document.getElementById('root')); +const root = createRoot(document.getElementById('graphiql')); root.render(); diff --git a/examples/graphiql-vite/vite.config.mjs b/examples/graphiql-vite/vite.config.mjs new file mode 100644 index 00000000000..7206a00dc88 --- /dev/null +++ b/examples/graphiql-vite/vite.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + worker: { + format: 'es', + }, +}); diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json index 4c1e5c26389..e4b7524ae63 100644 --- a/examples/graphiql-webpack/package.json +++ b/examples/graphiql-webpack/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "license": "MIT", - "description": "A GraphiQL example with webpack and typescript", + "description": "A GraphiQL example with Webpack", "scripts": { "build-demo": "webpack-cli && mkdirp ../../packages/graphiql/webpack && cp -r dist/** ../../packages/graphiql/webpack", "start": "NODE_ENV=development webpack-cli serve" diff --git a/examples/monaco-graphql-nextjs/.gitignore b/examples/monaco-graphql-nextjs/.gitignore deleted file mode 100644 index 536d88c8a6d..00000000000 --- a/examples/monaco-graphql-nextjs/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.next/ diff --git a/examples/monaco-graphql-nextjs/README.md b/examples/monaco-graphql-nextjs/README.md index d5901e71bac..9fecd96bd88 100644 --- a/examples/monaco-graphql-nextjs/README.md +++ b/examples/monaco-graphql-nextjs/README.md @@ -3,7 +3,7 @@ ## Getting Started This is a working example of `monaco-editor` and `monaco-graphql` using -`next.js` 13 +Next.js 15 with Turbopack. It shows how to use the latest monaco-editor with next.js and a custom webworker, without using `@monaco/react` or `monaco-editor-react`'s approach of @@ -11,7 +11,7 @@ cdn (AMD) bundles. These approaches avoid using ESM `monaco-editor` or web workers, which prevents introducing custom web workers like with `monaco-graphql`. -For universal loading, we use `@next/loadable` with `{ssr: false}`, but any +For lazy loading, we use `next/dynamic` with `{ssr: false}`, but any similar client-side-only loading (with or without dynamic import) should be fine. For more information on loading `monaco-editor` in esm contexts, you can [read their docs](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md) diff --git a/examples/monaco-graphql-nextjs/next-env.d.ts b/examples/monaco-graphql-nextjs/next-env.d.ts index 4f11a03dc6c..1b3be0840f3 100644 --- a/examples/monaco-graphql-nextjs/next-env.d.ts +++ b/examples/monaco-graphql-nextjs/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/examples/monaco-graphql-nextjs/next.config.js b/examples/monaco-graphql-nextjs/next.config.js deleted file mode 100644 index 3aba5c28211..00000000000 --- a/examples/monaco-graphql-nextjs/next.config.js +++ /dev/null @@ -1,64 +0,0 @@ -import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'; -import { patchWebpackConfig } from 'next-global-css'; - -/** @type {import('next').NextConfig} */ -const nextConfig = { - eslint: { - ignoreDuringBuilds: true, - }, - trailingSlash: true, - webpack(config, options) { - // this fixes some issues with loading web workers - config.output.publicPath = '/_next/'; - // because next.js doesn't like node_modules that import css files - // this solves the issue for monaco-editor, which relies on importing css files - patchWebpackConfig(config, options); - config.resolve.alias = { - ...config.resolve.alias, - // this solves a bug with more recent `monaco-editor` versions in next.js, - // where vscode contains a version of `marked` with modules pre-transpiled, which seems to break the build. - // - // (the error mentions that exports.Lexer is a const that can't be re-declared) - // this import has moved a bit, so let's make it absolute from the module path - 'monaco-editor/esm/vs/common/marked/marked.js': 'marked', - }; - if (!options.isServer) { - config.plugins.push( - // if you find yourself needing to override - // MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker, - // you probably just need to tweak configuration here. - new MonacoWebpackPlugin({ - // you can add other languages here as needed - languages: ['json', 'graphql'], - filename: 'static/[name].worker.js', - // this is not in the plugin readme, but saves us having to override - // MonacoEnvironment.getWorkerUrl or similar. - customLanguages: [ - { - label: 'graphql', - worker: { - id: 'graphql', - entry: 'monaco-graphql/esm/graphql.worker.js', - }, - }, - // TOD: webpack monaco editor plugin breaks on languages: ['typescript'] - // so this was necessary - // see: https://github.com/microsoft/monaco-editor/issues/2738 - { - label: 'typescript', - worker: { - id: 'typescript', - entry: 'monaco-editor/esm/vs/language/typescript/ts.worker.js', - }, - }, - ], - }), - ); - } - // load monaco-editor provided ttf fonts - config.module.rules.push({ test: /\.ttf$/, type: 'asset/resource' }); - return config; - }, -}; - -export default nextConfig; diff --git a/examples/monaco-graphql-nextjs/next.config.ts b/examples/monaco-graphql-nextjs/next.config.ts new file mode 100644 index 00000000000..b22af960af4 --- /dev/null +++ b/examples/monaco-graphql-nextjs/next.config.ts @@ -0,0 +1,5 @@ +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = {}; + +export default nextConfig; diff --git a/examples/monaco-graphql-nextjs/package.json b/examples/monaco-graphql-nextjs/package.json index d22b5a7eb73..becc11e3e53 100644 --- a/examples/monaco-graphql-nextjs/package.json +++ b/examples/monaco-graphql-nextjs/package.json @@ -4,28 +4,24 @@ "private": true, "type": "module", "scripts": { - "dev": "next", - "build": "next build", + "types:check": "tsc --noEmit", + "dev": "next --turbopack", + "build": "next build --turbopack", "start": "next start" }, "dependencies": { "@graphiql/toolkit": "^0.11.3", "graphql": "^16.9.0", - "graphql-ws": "^5.5.5", "jsonc-parser": "^3.2.0", - "marked": "^4.2.12", "monaco-editor": "^0.39.0", - "monaco-editor-webpack-plugin": "^7.0.1", "monaco-graphql": "^1.6.2", - "next": "13.4.7", - "prettier": "3.3.2", + "next": "15.3.3", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@types/node": "^16.18.4", "@types/react": "^19.1.2", - "next-global-css": "1.3.1", "typescript": "^4.6.3" } } diff --git a/examples/monaco-graphql-nextjs/src/app/env.d.ts b/examples/monaco-graphql-nextjs/src/app/env.d.ts new file mode 100644 index 00000000000..69e7472cd3b --- /dev/null +++ b/examples/monaco-graphql-nextjs/src/app/env.d.ts @@ -0,0 +1,4 @@ +declare namespace globalThis { + import type { Environment } from 'monaco-editor/esm/monaco-editor'; + var MonacoEnvironment: Environment; +} diff --git a/examples/monaco-graphql-nextjs/src/app/favicon.ico b/examples/monaco-graphql-nextjs/src/app/favicon.ico new file mode 100644 index 00000000000..718d6fea483 Binary files /dev/null and b/examples/monaco-graphql-nextjs/src/app/favicon.ico differ diff --git a/examples/monaco-graphql-nextjs/src/style.css b/examples/monaco-graphql-nextjs/src/app/globals.css similarity index 93% rename from examples/monaco-graphql-nextjs/src/style.css rename to examples/monaco-graphql-nextjs/src/app/globals.css index 12b19fc2642..e318a0c25f1 100644 --- a/examples/monaco-graphql-nextjs/src/style.css +++ b/examples/monaco-graphql-nextjs/src/app/globals.css @@ -3,7 +3,7 @@ body { height: 100vh; } -#__next { +#root { display: flex; height: inherit; } diff --git a/examples/monaco-graphql-nextjs/src/app/layout.tsx b/examples/monaco-graphql-nextjs/src/app/layout.tsx new file mode 100644 index 00000000000..e65922233fe --- /dev/null +++ b/examples/monaco-graphql-nextjs/src/app/layout.tsx @@ -0,0 +1,17 @@ +import type { FC, ReactNode } from 'react'; +import type { Metadata } from 'next'; +import './globals.css'; + +export const metadata: Metadata = { + title: 'Monaco Next.js Example', +}; + +const RootLayout: FC> = ({ children }) => { + return ( + + {children} + + ); +}; + +export default RootLayout; diff --git a/examples/monaco-graphql-nextjs/src/app/page.tsx b/examples/monaco-graphql-nextjs/src/app/page.tsx new file mode 100644 index 00000000000..54dbdec37d5 --- /dev/null +++ b/examples/monaco-graphql-nextjs/src/app/page.tsx @@ -0,0 +1,49 @@ +'use client'; + +import type { FC } from 'react'; +import dynamic from 'next/dynamic'; + +// dynamically import our GraphiQL component +const DynamicEditor = dynamic(() => import('../editor'), { ssr: false }); + +/** + * Setup Monaco Editor workers for Webpack/Turbopack projects like Next.js. + */ +globalThis.MonacoEnvironment = { + getWorker(_workerId: string, label: string) { + console.info('setup-workers/webpack', { label }); + switch (label) { + case 'json': + return new Worker( + new URL( + 'monaco-editor/esm/vs/language/json/json.worker.js', + import.meta.url, + ), + ); + case 'graphql': + return new Worker( + new URL('monaco-graphql/esm/graphql.worker.js', import.meta.url), + ); + case 'typescript': + return new Worker( + new URL( + 'monaco-editor/esm/vs/language/typescript/ts.worker.js', + import.meta.url, + ), + ); + } + return new Worker( + new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), + ); + }, +}; + +const Page: FC = () => { + return ( +
+ +
+ ); +}; + +export default Page; diff --git a/examples/monaco-graphql-nextjs/src/constants.ts b/examples/monaco-graphql-nextjs/src/constants.ts index 70639a6358c..e93d4f43171 100644 --- a/examples/monaco-graphql-nextjs/src/constants.ts +++ b/examples/monaco-graphql-nextjs/src/constants.ts @@ -1,8 +1,8 @@ -import { editor, Uri } from 'monaco-graphql/esm/monaco-editor'; +import { editor, Uri, languages } from 'monaco-graphql/esm/monaco-editor'; import { initializeMode } from 'monaco-graphql/esm/initializeMode'; import { parse, print } from 'graphql'; -type ModelType = 'operations' | 'variables' | 'response' | 'typescript'; +type ModelType = 'operations' | 'variables' | 'response' | 'ts'; export const GRAPHQL_URL = 'https://countries.trevorblades.com'; @@ -41,13 +41,12 @@ query Example($code: ID!, $filter: LanguageFilterInput!) { /* cSpell:enable */ let prettyOp = ''; -const makeOpTemplate = (op: string) => { +export const makeOpTemplate = (op: string) => { try { prettyOp = print(parse(op)); - return ` - const graphql = (arg: TemplateStringsArray): string => arg[0] + return `const graphql = (arg: TemplateStringsArray): string => arg[0] - const op = graphql\`\n${prettyOp}\n\``; +const op = graphql\`\n${prettyOp}\n\``; } catch { return prettyOp; } @@ -61,25 +60,24 @@ export const DEFAULT_VALUE: Record = { "code": "UA" }`, response: '', - typescript: makeOpTemplate(operations), + ts: makeOpTemplate(operations), }; -export const FILE_SYSTEM_PATH: Record< - ModelType, - `${string}.${'graphql' | 'json' | 'ts'}` -> = { - operations: 'operations.graphql', - variables: 'variables.json', - response: 'response.json', - typescript: 'typescript.ts', -}; +export const OPERATIONS_URI = Uri.file('operations.graphql'); +export const VARIABLES_URI = Uri.file('variables.json'); +export const RESPONSE_URI = Uri.file('response.json'); +export const TS_URI = Uri.file('typescript.ts'); + +// set these early on so that initial variables with comments don't flash an error +languages.json.jsonDefaults.setDiagnosticsOptions({ + allowComments: true, + trailingCommas: 'ignore', +}); export const MONACO_GRAPHQL_API = initializeMode({ diagnosticSettings: { validateVariablesJSON: { - [Uri.file(FILE_SYSTEM_PATH.operations).toString()]: [ - Uri.file(FILE_SYSTEM_PATH.variables).toString(), - ], + [OPERATIONS_URI.toString()]: [VARIABLES_URI.toString()], }, jsonDiagnosticSettings: { validate: true, @@ -91,27 +89,11 @@ export const MONACO_GRAPHQL_API = initializeMode({ }, }); -export const MODEL: Record = { - operations: getOrCreateModel('operations'), - variables: getOrCreateModel('variables'), - response: getOrCreateModel('response'), - typescript: getOrCreateModel('typescript'), -}; - -MODEL.operations.onDidChangeContent(() => { - const value = MODEL.operations.getValue(); - MODEL.typescript.setValue(makeOpTemplate(value)); -}); - -function getOrCreateModel(type: ModelType): editor.ITextModel { - const uri = Uri.file(FILE_SYSTEM_PATH[type]); - const defaultValue = DEFAULT_VALUE[type]; - let language = uri.path.split('.').pop(); - console.log({ language }); +export function getOrCreateModel({ uri, value }: { uri: Uri; value: string }) { + const { path } = uri; + let language = path.split('.').at(-1)!; if (language === 'ts') { language = 'typescript'; } - return ( - editor.getModel(uri) ?? editor.createModel(defaultValue, language, uri) - ); + return editor.getModel(uri) ?? editor.createModel(value, language, uri); } diff --git a/examples/monaco-graphql-nextjs/src/editor.tsx b/examples/monaco-graphql-nextjs/src/editor.tsx index d0f88faaef2..75498f65f47 100644 --- a/examples/monaco-graphql-nextjs/src/editor.tsx +++ b/examples/monaco-graphql-nextjs/src/editor.tsx @@ -1,11 +1,6 @@ import { ReactElement, useEffect, useRef, useState } from 'react'; import { getIntrospectionQuery, IntrospectionQuery } from 'graphql'; -import { - editor, - KeyMod, - KeyCode, - languages, -} from 'monaco-graphql/esm/monaco-editor'; +import { editor, KeyMod, KeyCode } from 'monaco-graphql/esm/monaco-editor'; // to get typescript mode working import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; @@ -20,7 +15,13 @@ import { MONACO_GRAPHQL_API, STORAGE_KEY, GRAPHQL_URL, - MODEL, + OPERATIONS_URI, + VARIABLES_URI, + RESPONSE_URI, + TS_URI, + DEFAULT_VALUE, + makeOpTemplate, + getOrCreateModel, } from './constants'; const fetcher = createGraphiQLFetcher({ url: GRAPHQL_URL }); @@ -45,7 +46,7 @@ function debounce any>(duration: number, fn: F) { let timeout = 0; return (...args: Parameters) => { if (timeout) { - window.clearTimeout(timeout); + clearTimeout(timeout); } timeout = window.setTimeout(() => { timeout = 0; @@ -54,58 +55,82 @@ function debounce any>(duration: number, fn: F) { }; } -const queryAction: editor.IActionDescriptor = { - id: 'graphql-run', - label: 'Run Operation', - contextMenuOrder: 0, - contextMenuGroupId: 'graphql', - keybindings: [ - // eslint-disable-next-line no-bitwise - KeyMod.CtrlCmd | KeyCode.Enter, - ], - async run() { - const result = await fetcher({ - query: MODEL.operations.getValue(), - variables: JSONC.parse(MODEL.variables.getValue()), - }); - // TODO: this demo only supports a single iteration for http GET/POST, - // no multipart or subscriptions yet. - // @ts-expect-error - const data = await result.next(); - MODEL.response.setValue(JSON.stringify(data.value, null, 2)); - }, -}; -// set these early on so that initial variables with comments don't flash an error -languages.json.jsonDefaults.setDiagnosticsOptions({ - allowComments: true, - trailingCommas: 'ignore', -}); - export default function Editor(): ReactElement { - const operationsRef = useRef(null); - const variablesRef = useRef(null); - const responseRef = useRef(null); - const typescriptRef = useRef(null); - const [operationsEditor, setOperationsEditor] = - useState(); - const [variablesEditor, setVariablesEditor] = - useState(); - const [responseEditor, setResponseEditor] = - useState(); - const [typescriptEditor, setTypescriptEditor] = - useState(); + const operationsRef = useRef(null!); + const variablesRef = useRef(null!); + const responseRef = useRef(null!); + const tsRef = useRef(null!); + const [schema, setSchema] = useState(); const [loading, setLoading] = useState(false); /** * Create the models & editors */ useEffect(() => { - if (!operationsEditor) { - const codeEditor = editor.create(operationsRef.current!, { + const MODEL = { + operations: getOrCreateModel({ + uri: OPERATIONS_URI, + value: DEFAULT_VALUE.operations, + }), + variables: getOrCreateModel({ + uri: VARIABLES_URI, + value: DEFAULT_VALUE.variables, + }), + response: getOrCreateModel({ + uri: RESPONSE_URI, + value: DEFAULT_VALUE.response, + }), + ts: getOrCreateModel({ + uri: TS_URI, + value: DEFAULT_VALUE.ts, + }), + }; + const EDITOR = { + operations: editor.create(operationsRef.current, { model: MODEL.operations, ...DEFAULT_EDITOR_OPTIONS, - }); - codeEditor.addAction(queryAction); + }), + variables: editor.create(variablesRef.current, { + model: MODEL.variables, + ...DEFAULT_EDITOR_OPTIONS, + }), + response: editor.create(responseRef.current, { + model: MODEL.response, + ...DEFAULT_EDITOR_OPTIONS, + readOnly: true, + smoothScrolling: true, + }), + ts: editor.create(tsRef.current, { + model: MODEL.ts, + ...DEFAULT_EDITOR_OPTIONS, + smoothScrolling: true, + readOnly: false, + 'semanticHighlighting.enabled': true, + language: 'typescript', + }), + }; + const queryAction: editor.IActionDescriptor = { + id: 'graphql-run', + label: 'Run Operation', + contextMenuOrder: 0, + contextMenuGroupId: 'graphql', + // eslint-disable-next-line no-bitwise + keybindings: [KeyMod.CtrlCmd | KeyCode.Enter], + async run() { + const result = await fetcher({ + query: MODEL.operations.getValue(), + variables: JSONC.parse(MODEL.variables.getValue()), + }); + // TODO: this demo only supports a single iteration for http GET/POST, + // no multipart or subscriptions yet. + // @ts-expect-error + const data = await result.next(); + MODEL.response.setValue(JSON.stringify(data.value, null, 2)); + }, + }; + + const disposables = [ + EDITOR.operations.addAction(queryAction), MODEL.operations.onDidChangeContent( debounce(300, () => { localStorage.setItem( @@ -113,15 +138,12 @@ export default function Editor(): ReactElement { MODEL.operations.getValue(), ); }), - ); - setOperationsEditor(codeEditor); - } - if (!variablesEditor) { - const codeEditor = editor.create(variablesRef.current!, { - model: MODEL.variables, - ...DEFAULT_EDITOR_OPTIONS, - }); - codeEditor.addAction(queryAction); + ), + MODEL.operations.onDidChangeContent(() => { + const value = MODEL.operations.getValue(); + MODEL.ts.setValue(makeOpTemplate(value)); + }), + EDITOR.variables.addAction(queryAction), MODEL.variables.onDidChangeContent( debounce(300, () => { localStorage.setItem( @@ -129,32 +151,17 @@ export default function Editor(): ReactElement { MODEL.variables.getValue(), ); }), - ); - setVariablesEditor(codeEditor); - } - if (!responseEditor) { - setResponseEditor( - editor.create(responseRef.current!, { - model: MODEL.response, - ...DEFAULT_EDITOR_OPTIONS, - readOnly: true, - smoothScrolling: true, - }), - ); - } - if (!typescriptEditor) { - setTypescriptEditor( - editor.create(typescriptRef.current!, { - model: MODEL.typescript, - ...DEFAULT_EDITOR_OPTIONS, - smoothScrolling: true, - readOnly: false, - 'semanticHighlighting.enabled': true, - language: 'typescript', - }), - ); - } - }, []); // eslint-disable-line react-hooks/exhaustive-deps -- only run once on mount + ), + ...Object.values(EDITOR), + ...Object.values(MODEL), + ]; + // Clean‑up on unmount + return () => { + for (const disposable of disposables) { + disposable.dispose(); // remove the listener + } + }; + }, []); /** * Handle the initial schema load */ @@ -180,7 +187,7 @@ export default function Editor(): ReactElement {
-
+
); diff --git a/examples/monaco-graphql-nextjs/src/pages/_app.tsx b/examples/monaco-graphql-nextjs/src/pages/_app.tsx deleted file mode 100644 index 70321d1ef2f..00000000000 --- a/examples/monaco-graphql-nextjs/src/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { AppProps } from 'next/app'; -import '../style.css'; - -export default function App({ Component, pageProps }: AppProps) { - return ; -} diff --git a/examples/monaco-graphql-nextjs/src/pages/index.tsx b/examples/monaco-graphql-nextjs/src/pages/index.tsx deleted file mode 100644 index f6541d67d6a..00000000000 --- a/examples/monaco-graphql-nextjs/src/pages/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Head from 'next/head'; -import dynamic from 'next/dynamic'; - -const DynamicEditor = dynamic(() => import('../editor'), { ssr: false }); - -export default function Home() { - return ( - <> - - Monaco Next.js Example - - - - - - - ); -} diff --git a/examples/monaco-graphql-nextjs/tsconfig.json b/examples/monaco-graphql-nextjs/tsconfig.json index 2159bf45c40..03c3a9c0c87 100644 --- a/examples/monaco-graphql-nextjs/tsconfig.json +++ b/examples/monaco-graphql-nextjs/tsconfig.json @@ -17,8 +17,13 @@ "baseUrl": ".", "paths": { "@/*": ["./src/*"] - } + }, + "plugins": [ + { + "name": "next" + } + ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"], "exclude": ["node_modules"] } diff --git a/examples/monaco-graphql-react-vite/index.html b/examples/monaco-graphql-react-vite/index.html index 8e69c0f6159..ef1a28f59b6 100644 --- a/examples/monaco-graphql-react-vite/index.html +++ b/examples/monaco-graphql-react-vite/index.html @@ -17,7 +17,7 @@ -
+
Loading…
diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json index f8b0f01a799..46b28c1f988 100644 --- a/examples/monaco-graphql-react-vite/package.json +++ b/examples/monaco-graphql-react-vite/package.json @@ -9,17 +9,16 @@ "jsonc-parser": "^3.2.0", "monaco-editor": "^0.52.2", "monaco-graphql": "^1.6.2", - "prettier": "3.3.2", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@vitejs/plugin-react": "^4.4.1", - "vite": "^6.3.4", - "vite-plugin-monaco-editor": "^1.1.0" + "vite": "^6.3.4" }, "scripts": { "dev": "vite", - "build": "vite build" + "build": "vite build", + "start": "vite preview" } } diff --git a/examples/monaco-graphql-react-vite/src/env.d.ts b/examples/monaco-graphql-react-vite/src/env.d.ts new file mode 100644 index 00000000000..69e7472cd3b --- /dev/null +++ b/examples/monaco-graphql-react-vite/src/env.d.ts @@ -0,0 +1,4 @@ +declare namespace globalThis { + import type { Environment } from 'monaco-editor/esm/monaco-editor'; + var MonacoEnvironment: Environment; +} diff --git a/examples/monaco-graphql-react-vite/src/globals.css b/examples/monaco-graphql-react-vite/src/globals.css new file mode 120000 index 00000000000..1eaa2083163 --- /dev/null +++ b/examples/monaco-graphql-react-vite/src/globals.css @@ -0,0 +1 @@ +../../monaco-graphql-nextjs/src/app/globals.css \ No newline at end of file diff --git a/examples/monaco-graphql-react-vite/src/index.tsx b/examples/monaco-graphql-react-vite/src/index.tsx index 83f9e302e91..46b183ab3e6 100644 --- a/examples/monaco-graphql-react-vite/src/index.tsx +++ b/examples/monaco-graphql-react-vite/src/index.tsx @@ -1,5 +1,35 @@ +/* eslint-disable import-x/default */ import { createRoot } from 'react-dom/client'; +import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker'; +import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker'; +import TSWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker'; +import GraphQLWorker from 'monaco-graphql/esm/graphql.worker.js?worker'; import Editor from './editor'; +import './globals.css'; -const root = createRoot(document.getElementById('__next')!); +/** + * Setup Monaco Editor workers for Vite. + * + * Vite doesn’t support instantiating web workers directly from bare module imports like this: + * ``` + * new Worker(new URL('monaco-editor/esm/vs/language/json/json.worker.js', import.meta.url)) + * ``` + * Vite needs to know ahead of time that you are loading a web worker. + */ +globalThis.MonacoEnvironment = { + getWorker(_workerId: string, label: string) { + console.info('setup-workers/vite', { label }); + switch (label) { + case 'json': + return new JsonWorker(); + case 'graphql': + return new GraphQLWorker(); + case 'typescript': + return new TSWorker(); + } + return new EditorWorker(); + }, +}; + +const root = createRoot(document.getElementById('root')!); root.render(); diff --git a/examples/monaco-graphql-react-vite/src/style.css b/examples/monaco-graphql-react-vite/src/style.css deleted file mode 120000 index 32a7938addd..00000000000 --- a/examples/monaco-graphql-react-vite/src/style.css +++ /dev/null @@ -1 +0,0 @@ -../../monaco-graphql-nextjs/src/style.css \ No newline at end of file diff --git a/examples/monaco-graphql-react-vite/vite.config.ts b/examples/monaco-graphql-react-vite/vite.config.ts index 263927a7cfd..118a23dd471 100644 --- a/examples/monaco-graphql-react-vite/vite.config.ts +++ b/examples/monaco-graphql-react-vite/vite.config.ts @@ -1,26 +1,30 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import monacoEditorPlugin from 'vite-plugin-monaco-editor'; export default defineConfig({ build: { minify: false, + rollupOptions: { + output: { + entryFileNames: '[name].js', + chunkFileNames: 'assets/[name].js', + assetFileNames: 'assets/[name].[ext]', + }, + }, }, plugins: [ react(), - monacoEditorPlugin({ - publicPath: 'workers', - // note that this only loads the worker, not the full main process language support - languageWorkers: ['json', 'typescript', 'editorWorkerService'], - customWorkers: [ - { - label: 'graphql', - entry: 'monaco-graphql/esm/graphql.worker', - }, - ], - }), watchPackages(['monaco-graphql', 'graphql-language-service']), ], + worker: { + format: 'es', + rollupOptions: { + output: { + entryFileNames: 'workers/[name].js', + chunkFileNames: 'workers/[name].js', + }, + }, + }, }); function watchPackages(packageNames: string[]) { diff --git a/packages/monaco-graphql/test/monaco-editor.test.ts b/packages/monaco-graphql/test/monaco-editor.test.ts index dba14d13198..10c50cff0eb 100644 --- a/packages/monaco-graphql/test/monaco-editor.test.ts +++ b/packages/monaco-graphql/test/monaco-editor.test.ts @@ -1,5 +1,4 @@ import { $ } from 'execa'; -import { version } from 'graphql'; // eslint-disable-next-line no-control-regex const ANSI_COLOR_REGEX = /\u001b\[\d+m/g; @@ -10,21 +9,35 @@ describe('monaco-editor', () => { await $`yarn workspace example-monaco-graphql-react-vite build`; // When process.env.CI is set, stdout contain ANSI color codes, and vite doesn't have // `--no-colors` flag - const lines = stdout.replaceAll(ANSI_COLOR_REGEX, '').split('\n'); - // expect(lines[0]).toBe('$ vite build'); - // expect(lines[2]).toBe('transforming...'); - expect(lines[2]).toMatch( - `✓ ${parseInt(version, 10) > 16 ? 862 : 898} modules transformed.`, - ); - // expect(lines[4]).toBe('rendering chunks...'); - // expect(lines[5]).toBe('computing gzip size...'); - // expect(lines[6]).toMatch('dist/index.html'); - // expect(lines[7]).toMatch('dist/assets/codicon-'); - // expect(lines[8]).toMatch('dist/assets/index-'); - // expect(lines[9]).toMatch('dist/assets/graphql-'); - // expect(lines[10]).toMatch('dist/assets/jsonMode-'); - // expect(lines[11]).toMatch('dist/assets/graphqlMode-'); - // expect(lines[12]).toMatch('dist/assets/index-'); - // expect(lines[13]).toMatch('✓ built in '); + const output = stdout + .replaceAll(ANSI_COLOR_REGEX, '') + .split('\n') + .slice(1, -1) + .join('\n') + // To replace two or more spaces and everything until the end of the line + // Because kb fails on CI + .replaceAll(/\s{2,}.*/gm, ''); + expect(output).toMatchInlineSnapshot(` + "transforming... + ✓ 902 modules transformed. + rendering chunks... + computing gzip size... + dist/index.html + dist/workers/graphql.js + dist/assets/codicon.ttf + dist/workers/standalone.js + dist/workers/editor.worker.js + dist/workers/json.worker.js + dist/workers/graphql.worker.js + dist/workers/ts.worker.js + dist/assets/index.css + dist/assets/graphql.js + dist/assets/typescript.js + dist/assets/index.js + dist/assets/tsMode.js + dist/assets/jsonMode.js + dist/assets/graphqlMode.js + dist/index.js" + `); }, 50_000); }); diff --git a/yarn.lock b/yarn.lock index 3ef8c946487..513213ed8ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2540,7 +2540,7 @@ __metadata: languageName: node linkType: hard -"@emnapi/runtime@npm:^1.4.0": +"@emnapi/runtime@npm:^1.4.0, @emnapi/runtime@npm:^1.4.3": version: 1.4.3 resolution: "@emnapi/runtime@npm:1.4.3" dependencies: @@ -3698,6 +3698,195 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-darwin-arm64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-darwin-x64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.1.0" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.1.0" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.1.0" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linux-arm@npm:1.1.0" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-ppc64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linux-ppc64@npm:1.1.0" + conditions: os=linux & cpu=ppc64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.1.0" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linux-x64@npm:1.1.0" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.1.0" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.1.0": + version: 1.1.0 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.1.0" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linux-arm64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linux-arm@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linux-s390x@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linux-x64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-linuxmusl-x64@npm:0.34.2" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.1.0" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-wasm32@npm:0.34.2" + dependencies: + "@emnapi/runtime": "npm:^1.4.3" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-arm64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-win32-arm64@npm:0.34.2" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-win32-ia32@npm:0.34.2" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.34.2": + version: 0.34.2 + resolution: "@img/sharp-win32-x64@npm:0.34.2" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -4178,72 +4367,65 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.4.7": - version: 13.4.7 - resolution: "@next/env@npm:13.4.7" - checksum: 10c0/3e610f68675c689549d1faf202244ec29cee5253ac4d3bd6a52bd8c0f92edd6fbb40f533aa61207ec96186080e7dea3b47b98e629bf708c93a2c15fe0ac6295a +"@next/env@npm:15.3.3": + version: 15.3.3 + resolution: "@next/env@npm:15.3.3" + checksum: 10c0/b47ef78c4194900f52a274270932a633ba21f39377fc6ad478839c3c1e3fffccb8ad25b286a1beb11f91fe9d09a299087ccb9c205a4e610ad95af65f24e49e5a languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-darwin-arm64@npm:13.4.7" +"@next/swc-darwin-arm64@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-darwin-arm64@npm:15.3.3" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-darwin-x64@npm:13.4.7" +"@next/swc-darwin-x64@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-darwin-x64@npm:15.3.3" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-linux-arm64-gnu@npm:13.4.7" +"@next/swc-linux-arm64-gnu@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-linux-arm64-gnu@npm:15.3.3" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-linux-arm64-musl@npm:13.4.7" +"@next/swc-linux-arm64-musl@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-linux-arm64-musl@npm:15.3.3" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-linux-x64-gnu@npm:13.4.7" +"@next/swc-linux-x64-gnu@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-linux-x64-gnu@npm:15.3.3" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-linux-x64-musl@npm:13.4.7" +"@next/swc-linux-x64-musl@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-linux-x64-musl@npm:15.3.3" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-win32-arm64-msvc@npm:13.4.7" +"@next/swc-win32-arm64-msvc@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-win32-arm64-msvc@npm:15.3.3" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-win32-ia32-msvc@npm:13.4.7" - conditions: os=win32 & cpu=ia32 - languageName: node - linkType: hard - -"@next/swc-win32-x64-msvc@npm:13.4.7": - version: 13.4.7 - resolution: "@next/swc-win32-x64-msvc@npm:13.4.7" +"@next/swc-win32-x64-msvc@npm:15.3.3": + version: 15.3.3 + resolution: "@next/swc-win32-x64-msvc@npm:15.3.3" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -5536,12 +5718,19 @@ __metadata: languageName: node linkType: hard -"@swc/helpers@npm:0.5.1": - version: 0.5.1 - resolution: "@swc/helpers@npm:0.5.1" +"@swc/counter@npm:0.1.3": + version: 0.1.3 + resolution: "@swc/counter@npm:0.1.3" + checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356 + languageName: node + linkType: hard + +"@swc/helpers@npm:0.5.15": + version: 0.5.15 + resolution: "@swc/helpers@npm:0.5.15" dependencies: - tslib: "npm:^2.4.0" - checksum: 10c0/2e2272c8278351670e1daf27cc634ace793afb378dcc85be2800d30a7b4d3afad37707371ead2a6d96662fa30294da678d66cdc4dc7f3e698bd8e111235c60fc + tslib: "npm:^2.8.0" + checksum: 10c0/33002f74f6f885f04c132960835fdfc474186983ea567606db62e86acd0680ca82f34647e8e610f4e1e422d1c16fce729dde22cd3b797ab1fd9061a825dabca4 languageName: node linkType: hard @@ -6156,6 +6345,15 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^20": + version: 20.17.57 + resolution: "@types/node@npm:20.17.57" + dependencies: + undici-types: "npm:~6.19.2" + checksum: 10c0/c04f3b6c4f335ad50bd3af62cd9e64a86c355cb6b363cb0e618511db4c6801c8539781c3786076eca6f56e999d6c7fc4748e43393a107aad57e65e3ffd1f73bf + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.0 resolution: "@types/normalize-package-data@npm:2.4.0" @@ -6198,6 +6396,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:^19": + version: 19.1.5 + resolution: "@types/react-dom@npm:19.1.5" + peerDependencies: + "@types/react": ^19.0.0 + checksum: 10c0/2a29e77cf6bb6e9f57bcfa54509c216cad2e16e244f0bd56369966ec88c072b9c91f6011d14f9e18fbfe2b801b18b86f616de75e5c8aef0be73c1f74abb33b49 + languageName: node + linkType: hard + "@types/react-dom@npm:^19.1.2": version: 19.1.3 resolution: "@types/react-dom@npm:19.1.3" @@ -6207,6 +6414,15 @@ __metadata: languageName: node linkType: hard +"@types/react@npm:^19": + version: 19.1.6 + resolution: "@types/react@npm:19.1.6" + dependencies: + csstype: "npm:^3.0.2" + checksum: 10c0/8b10b198e28997b3c57559750f8bcf5ae7b33c554b16b6f4fe2ece1d4de6a2fc8cb53e7effe08ec9cb939d2f479eb97c5e08aac2cf83b10a90164fe451cc8ea2 + languageName: node + linkType: hard + "@types/react@npm:^19.1.2": version: 19.1.2 resolution: "@types/react@npm:19.1.2" @@ -9073,7 +9289,14 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001716": +"caniuse-lite@npm:^1.0.30001579": + version: 1.0.30001720 + resolution: "caniuse-lite@npm:1.0.30001720" + checksum: 10c0/ba9f963364ec4bfc8359d15d7e2cf365185fa1fddc90b4f534c71befedae9b3dd0cd2583a25ffc168a02d7b61b6c18b59bda0a1828ea2a5250fd3e35c2c049e9 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001716": version: 1.0.30001717 resolution: "caniuse-lite@npm:1.0.30001717" checksum: 10c0/6c0bb1e5182fd578ebe97ee2203250849754a4e17d985839fab527ad27e125a4c4ffce3ece5505217fedf30ea0bbc17ac9f93e9ac525c0389ccba61c6e8345dc @@ -9631,13 +9854,33 @@ __metadata: languageName: node linkType: hard -"color-name@npm:^1.1.4, color-name@npm:~1.1.4": +"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4": version: 1.1.4 resolution: "color-name@npm:1.1.4" checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95 languageName: node linkType: hard +"color-string@npm:^1.9.0": + version: 1.9.1 + resolution: "color-string@npm:1.9.1" + dependencies: + color-name: "npm:^1.0.0" + simple-swizzle: "npm:^0.2.2" + checksum: 10c0/b0bfd74c03b1f837f543898b512f5ea353f71630ccdd0d66f83028d1f0924a7d4272deb278b9aef376cacf1289b522ac3fb175e99895283645a2dc3a33af2404 + languageName: node + linkType: hard + +"color@npm:^4.2.3": + version: 4.2.3 + resolution: "color@npm:4.2.3" + dependencies: + color-convert: "npm:^2.0.1" + color-string: "npm:^1.9.0" + checksum: 10c0/7fbe7cfb811054c808349de19fb380252e5e34e61d7d168ec3353e9e9aacb1802674bddc657682e4e9730c2786592a4de6f8283e7e0d3870b829bb0b7b2f6118 + languageName: node + linkType: hard + "colorette@npm:^2.0.10, colorette@npm:^2.0.14, colorette@npm:^2.0.16": version: 2.0.19 resolution: "colorette@npm:2.0.19" @@ -10678,7 +10921,7 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3": +"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.3, detect-libc@npm:^2.0.4": version: 2.0.4 resolution: "detect-libc@npm:2.0.4" checksum: 10c0/c15541f836eba4b1f521e4eecc28eefefdbc10a94d3b8cb4c507689f332cc111babb95deda66f2de050b22122113189986d5190be97d51b5a2b23b938415e67c @@ -12259,6 +12502,34 @@ __metadata: languageName: node linkType: hard +"example-graphiql-nextjs@workspace:examples/graphiql-nextjs": + version: 0.0.0-use.local + resolution: "example-graphiql-nextjs@workspace:examples/graphiql-nextjs" + dependencies: + "@types/node": "npm:^20" + "@types/react": "npm:^19" + "@types/react-dom": "npm:^19" + graphiql: "npm:^4.1.0" + next: "npm:15.3.3" + react: "npm:^19.1.0" + react-dom: "npm:^19.1.0" + typescript: "npm:^5" + languageName: unknown + linkType: soft + +"example-graphiql-vite@workspace:examples/graphiql-vite": + version: 0.0.0-use.local + resolution: "example-graphiql-vite@workspace:examples/graphiql-vite" + dependencies: + "@vitejs/plugin-react": "npm:^4.4.1" + graphiql: "npm:^4.1.0" + graphql: "npm:^16.11.0" + react: "npm:^19.1.0" + react-dom: "npm:^19.1.0" + vite: "npm:^6.3.4" + languageName: unknown + linkType: soft + "example-graphiql-webpack@workspace:examples/graphiql-webpack": version: 0.0.0-use.local resolution: "example-graphiql-webpack@workspace:examples/graphiql-webpack" @@ -12303,15 +12574,10 @@ __metadata: "@types/node": "npm:^16.18.4" "@types/react": "npm:^19.1.2" graphql: "npm:^16.9.0" - graphql-ws: "npm:^5.5.5" jsonc-parser: "npm:^3.2.0" - marked: "npm:^4.2.12" monaco-editor: "npm:^0.39.0" - monaco-editor-webpack-plugin: "npm:^7.0.1" monaco-graphql: "npm:^1.6.2" - next: "npm:13.4.7" - next-global-css: "npm:1.3.1" - prettier: "npm:3.3.2" + next: "npm:15.3.3" react: "npm:^19.1.0" react-dom: "npm:^19.1.0" typescript: "npm:^4.6.3" @@ -12329,11 +12595,9 @@ __metadata: jsonc-parser: "npm:^3.2.0" monaco-editor: "npm:^0.52.2" monaco-graphql: "npm:^1.6.2" - prettier: "npm:3.3.2" react: "npm:^19.1.0" react-dom: "npm:^19.1.0" vite: "npm:^6.3.4" - vite-plugin-monaco-editor: "npm:^1.1.0" languageName: unknown linkType: soft @@ -13947,7 +14211,7 @@ __metadata: languageName: unknown linkType: soft -"graphiql@npm:^4.1.1, graphiql@workspace:packages/graphiql": +"graphiql@npm:^4.1.0, graphiql@npm:^4.1.1, graphiql@workspace:packages/graphiql": version: 0.0.0-use.local resolution: "graphiql@workspace:packages/graphiql" dependencies: @@ -14893,6 +15157,13 @@ __metadata: languageName: node linkType: hard +"is-arrayish@npm:^0.3.1": + version: 0.3.2 + resolution: "is-arrayish@npm:0.3.2" + checksum: 10c0/f59b43dc1d129edb6f0e282595e56477f98c40278a2acdc8b0a5c57097c9eff8fe55470493df5775478cf32a4dc8eaf6d3a749f07ceee5bc263a78b2434f6a54 + languageName: node + linkType: hard + "is-async-function@npm:^2.0.0": version: 2.0.0 resolution: "is-async-function@npm:2.0.0" @@ -17389,15 +17660,6 @@ __metadata: languageName: node linkType: hard -"marked@npm:^4.2.12": - version: 4.3.0 - resolution: "marked@npm:4.3.0" - bin: - marked: bin/marked.js - checksum: 10c0/0013463855e31b9c88d8bb2891a611d10ef1dc79f2e3cbff1bf71ba389e04c5971298c886af0be799d7fa9aa4593b086a136062d59f1210b0480b026a8c5dc47 - languageName: node - linkType: hard - "matched@npm:^0.4.1": version: 0.4.4 resolution: "matched@npm:0.4.4" @@ -18484,7 +18746,7 @@ __metadata: languageName: node linkType: hard -"nanoid@npm:^3.3.4, nanoid@npm:^3.3.8": +"nanoid@npm:^3.3.6, nanoid@npm:^3.3.8": version: 3.3.11 resolution: "nanoid@npm:3.3.11" bin: @@ -18546,39 +18808,32 @@ __metadata: languageName: unknown linkType: soft -"next-global-css@npm:1.3.1": - version: 1.3.1 - resolution: "next-global-css@npm:1.3.1" - checksum: 10c0/7a914516b1e889686cbda0d060fa773a2de1787ee1f1e7006333a8439f5ec3c964a4faf43a4e972a007f28649e5df519ad3acd323ef21f15f6542eb3fd52cef3 - languageName: node - linkType: hard - -"next@npm:13.4.7": - version: 13.4.7 - resolution: "next@npm:13.4.7" - dependencies: - "@next/env": "npm:13.4.7" - "@next/swc-darwin-arm64": "npm:13.4.7" - "@next/swc-darwin-x64": "npm:13.4.7" - "@next/swc-linux-arm64-gnu": "npm:13.4.7" - "@next/swc-linux-arm64-musl": "npm:13.4.7" - "@next/swc-linux-x64-gnu": "npm:13.4.7" - "@next/swc-linux-x64-musl": "npm:13.4.7" - "@next/swc-win32-arm64-msvc": "npm:13.4.7" - "@next/swc-win32-ia32-msvc": "npm:13.4.7" - "@next/swc-win32-x64-msvc": "npm:13.4.7" - "@swc/helpers": "npm:0.5.1" +"next@npm:15.3.3": + version: 15.3.3 + resolution: "next@npm:15.3.3" + dependencies: + "@next/env": "npm:15.3.3" + "@next/swc-darwin-arm64": "npm:15.3.3" + "@next/swc-darwin-x64": "npm:15.3.3" + "@next/swc-linux-arm64-gnu": "npm:15.3.3" + "@next/swc-linux-arm64-musl": "npm:15.3.3" + "@next/swc-linux-x64-gnu": "npm:15.3.3" + "@next/swc-linux-x64-musl": "npm:15.3.3" + "@next/swc-win32-arm64-msvc": "npm:15.3.3" + "@next/swc-win32-x64-msvc": "npm:15.3.3" + "@swc/counter": "npm:0.1.3" + "@swc/helpers": "npm:0.5.15" busboy: "npm:1.6.0" - caniuse-lite: "npm:^1.0.30001406" - postcss: "npm:8.4.14" - styled-jsx: "npm:5.1.1" - watchpack: "npm:2.4.0" - zod: "npm:3.21.4" + caniuse-lite: "npm:^1.0.30001579" + postcss: "npm:8.4.31" + sharp: "npm:^0.34.1" + styled-jsx: "npm:5.1.6" peerDependencies: "@opentelemetry/api": ^1.1.0 - fibers: ">= 3.1.0" - react: ^18.2.0 - react-dom: ^18.2.0 + "@playwright/test": ^1.41.2 + babel-plugin-react-compiler: "*" + react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 + react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0 sass: ^1.3.0 dependenciesMeta: "@next/swc-darwin-arm64": @@ -18595,20 +18850,22 @@ __metadata: optional: true "@next/swc-win32-arm64-msvc": optional: true - "@next/swc-win32-ia32-msvc": - optional: true "@next/swc-win32-x64-msvc": optional: true + sharp: + optional: true peerDependenciesMeta: "@opentelemetry/api": optional: true - fibers: + "@playwright/test": + optional: true + babel-plugin-react-compiler: optional: true sass: optional: true bin: next: dist/bin/next - checksum: 10c0/7bb57eb1815e39c9e9c989d3dc0931e48595abadc7b9a84af3e6525f0c495f0c0f732deb0e2fbcd3f3e8940c4e7d1342d23f771127c675894f2cb4bb8b4e999b + checksum: 10c0/b519d348efd905ac63b2e5cb1e5a3d8e5d11d992aba436f4eef28c66f4555f155bb2bd489d0d029867e926539b31a3f14dd81b0ebca54ce9f3d65a883fb94d4b languageName: node linkType: hard @@ -19801,14 +20058,14 @@ __metadata: languageName: node linkType: hard -"postcss@npm:8.4.14": - version: 8.4.14 - resolution: "postcss@npm:8.4.14" +"postcss@npm:8.4.31": + version: 8.4.31 + resolution: "postcss@npm:8.4.31" dependencies: - nanoid: "npm:^3.3.4" + nanoid: "npm:^3.3.6" picocolors: "npm:^1.0.0" source-map-js: "npm:^1.0.2" - checksum: 10c0/2a4cfa28e2f1bfd358313501f7771bd596e494487c7b735c492e2f8b1faf493d24fcb43e2e6ad825863fc65a77abb949ca8f228602ae46a022f02dc812c4ac8b + checksum: 10c0/748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf languageName: node linkType: hard @@ -21317,6 +21574,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.7.2": + version: 7.7.2 + resolution: "semver@npm:7.7.2" + bin: + semver: bin/semver.js + checksum: 10c0/aca305edfbf2383c22571cb7714f48cadc7ac95371b4b52362fb8eeffdfbc0de0669368b82b2b15978f8848f01d7114da65697e56cd8c37b0dab8c58e543f9ea + languageName: node + linkType: hard + "semver@npm:~7.5.4": version: 7.5.4 resolution: "semver@npm:7.5.4" @@ -21535,6 +21801,81 @@ __metadata: languageName: node linkType: hard +"sharp@npm:^0.34.1": + version: 0.34.2 + resolution: "sharp@npm:0.34.2" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.34.2" + "@img/sharp-darwin-x64": "npm:0.34.2" + "@img/sharp-libvips-darwin-arm64": "npm:1.1.0" + "@img/sharp-libvips-darwin-x64": "npm:1.1.0" + "@img/sharp-libvips-linux-arm": "npm:1.1.0" + "@img/sharp-libvips-linux-arm64": "npm:1.1.0" + "@img/sharp-libvips-linux-ppc64": "npm:1.1.0" + "@img/sharp-libvips-linux-s390x": "npm:1.1.0" + "@img/sharp-libvips-linux-x64": "npm:1.1.0" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.1.0" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.1.0" + "@img/sharp-linux-arm": "npm:0.34.2" + "@img/sharp-linux-arm64": "npm:0.34.2" + "@img/sharp-linux-s390x": "npm:0.34.2" + "@img/sharp-linux-x64": "npm:0.34.2" + "@img/sharp-linuxmusl-arm64": "npm:0.34.2" + "@img/sharp-linuxmusl-x64": "npm:0.34.2" + "@img/sharp-wasm32": "npm:0.34.2" + "@img/sharp-win32-arm64": "npm:0.34.2" + "@img/sharp-win32-ia32": "npm:0.34.2" + "@img/sharp-win32-x64": "npm:0.34.2" + color: "npm:^4.2.3" + detect-libc: "npm:^2.0.4" + semver: "npm:^7.7.2" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-ppc64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-arm64": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10c0/43967dbaaf1e1140a2f43b51d54762cc1bba01648392e355028568e4838833bf1abc2a96c09b893e6407b0c59a2c271d66e8d56a582aa6c951d476ab83a37fba + languageName: node + linkType: hard + "shebang-command@npm:^1.2.0": version: 1.2.0 resolution: "shebang-command@npm:1.2.0" @@ -21667,6 +22008,15 @@ __metadata: languageName: node linkType: hard +"simple-swizzle@npm:^0.2.2": + version: 0.2.2 + resolution: "simple-swizzle@npm:0.2.2" + dependencies: + is-arrayish: "npm:^0.3.1" + checksum: 10c0/df5e4662a8c750bdba69af4e8263c5d96fe4cd0f9fe4bdfa3cbdeb45d2e869dff640beaaeb1ef0e99db4d8d2ec92f85508c269f50c972174851bc1ae5bd64308 + languageName: node + linkType: hard + "sisteransi@npm:^1.0.5": version: 1.0.5 resolution: "sisteransi@npm:1.0.5" @@ -22433,19 +22783,19 @@ __metadata: languageName: node linkType: hard -"styled-jsx@npm:5.1.1": - version: 5.1.1 - resolution: "styled-jsx@npm:5.1.1" +"styled-jsx@npm:5.1.6": + version: 5.1.6 + resolution: "styled-jsx@npm:5.1.6" dependencies: client-only: "npm:0.0.1" peerDependencies: - react: ">= 16.8.0 || 17.x.x || ^18.0.0-0" + react: ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" peerDependenciesMeta: "@babel/core": optional: true babel-plugin-macros: optional: true - checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835 + checksum: 10c0/ace50e7ea5ae5ae6a3b65a50994c51fca6ae7df9c7ecfd0104c36be0b4b3a9c5c1a2374d16e2a11e256d0b20be6d47256d768ecb4f91ab390f60752a075780f5 languageName: node linkType: hard @@ -23556,6 +23906,13 @@ __metadata: languageName: node linkType: hard +"undici-types@npm:~6.19.2": + version: 6.19.8 + resolution: "undici-types@npm:6.19.8" + checksum: 10c0/078afa5990fba110f6824823ace86073b4638f1d5112ee26e790155f481f2a868cc3e0615505b6f4282bdf74a3d8caad715fd809e870c2bb0704e3ea6082f344 + languageName: node + linkType: hard + "undici-types@npm:~6.21.0": version: 6.21.0 resolution: "undici-types@npm:6.21.0" @@ -24169,15 +24526,6 @@ __metadata: languageName: node linkType: hard -"vite-plugin-monaco-editor@npm:^1.1.0": - version: 1.1.0 - resolution: "vite-plugin-monaco-editor@npm:1.1.0" - peerDependencies: - monaco-editor: ">=0.33.0" - checksum: 10c0/1f0d839c194d79f21f4ef192d19d82e42ed6dbbab580df684db2e4eeb01d1f2e9c572e9e5b50e9887e9028a54514c496ee6db9d68cab579d375d09456d8b91ee - languageName: node - linkType: hard - "vite-plugin-svgr@npm:^4.3.0": version: 4.3.0 resolution: "vite-plugin-svgr@npm:4.3.0" @@ -24560,16 +24908,6 @@ __metadata: languageName: node linkType: hard -"watchpack@npm:2.4.0": - version: 2.4.0 - resolution: "watchpack@npm:2.4.0" - dependencies: - glob-to-regexp: "npm:^0.4.1" - graceful-fs: "npm:^4.1.2" - checksum: 10c0/c5e35f9fb9338d31d2141d9835643c0f49b5f9c521440bb648181059e5940d93dd8ed856aa8a33fbcdd4e121dad63c7e8c15c063cf485429cd9d427be197fe62 - languageName: node - linkType: hard - "watchpack@npm:^2.4.0, watchpack@npm:^2.4.1": version: 2.4.2 resolution: "watchpack@npm:2.4.2" @@ -25773,13 +26111,6 @@ __metadata: languageName: node linkType: hard -"zod@npm:3.21.4": - version: 3.21.4 - resolution: "zod@npm:3.21.4" - checksum: 10c0/161e8cf7aea38a99244d65da4a9477d9d966f6a533e503feaa20ff7968a9691065c38c6f1eab5cbbdc8374142fff4a05c9cacb8479803ab50ab6a6ca80e5d624 - languageName: node - linkType: hard - "zod@npm:^3.22.4": version: 3.23.8 resolution: "zod@npm:3.23.8"