@graphiql/react
Version:
[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)
344 lines (343 loc) • 11.6 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { getSelectedOperationName } from "@graphiql/toolkit";
import { getOperationFacts, getContextAtPosition } from "graphql-language-service";
import { useRef, useEffect } from "react";
import { useGraphiQLActions, useGraphiQL } from "./provider.js";
import { URI_NAME, MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS, KEY_BINDINGS, STORAGE_KEY } from "../constants.js";
import { toGraphQLPosition } from "monaco-graphql/esm/utils.js";
import { useMonaco } from "../stores/monaco.js";
import { onEditorContainerKeyDown, getOrCreateModel, createEditor } from "../utility/create-editor.js";
import { pick } from "../utility/pick.js";
import { debounce } from "../utility/debounce.js";
import { cleanupDisposables } from "../utility/cleanup-disposables.js";
import { clsx } from "clsx";
import { URI } from "monaco-editor/esm/vs/base/common/uri.js";
import { Range } from "monaco-editor/esm/vs/editor/common/core/range.js";
const OperationEditor = (t0) => {
const $ = c(53);
let onClickReference;
let onEdit;
let props;
if ($[0] !== t0) {
({
onClickReference,
onEdit,
...props
} = t0);
$[0] = t0;
$[1] = onClickReference;
$[2] = onEdit;
$[3] = props;
} else {
onClickReference = $[1];
onEdit = $[2];
props = $[3];
}
const {
setOperationName,
setEditor,
updateActiveTabValues,
setVisiblePlugin,
setSchemaReference,
run,
setOperationFacts,
copyQuery,
prettifyEditors,
mergeQuery
} = useGraphiQLActions();
let t1;
if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
t1 = pick("initialQuery", "schema", "referencePlugin", "operations", "operationName", "externalFragments", "uriInstanceId", "storage", "monacoTheme");
$[4] = t1;
} else {
t1 = $[4];
}
const {
initialQuery,
schema,
referencePlugin,
operations,
operationName,
externalFragments,
uriInstanceId,
storage,
monacoTheme
} = useGraphiQL(t1);
const ref = useRef(null);
const onClickReferenceRef = useRef(null);
let t2;
let t3;
if ($[5] !== onClickReference) {
t2 = () => {
onClickReferenceRef.current = onClickReference;
};
t3 = [onClickReference];
$[5] = onClickReference;
$[6] = t2;
$[7] = t3;
} else {
t2 = $[6];
t3 = $[7];
}
useEffect(t2, t3);
let t4;
if ($[8] !== operationName || $[9] !== operations || $[10] !== schema || $[11] !== setOperationFacts) {
t4 = function getAndUpdateOperationFacts2(editorInstance) {
const operationFacts = getOperationFacts(schema, editorInstance.getValue());
const newOperationName = getSelectedOperationName(operations, operationName, operationFacts == null ? void 0 : operationFacts.operations);
setOperationFacts({
documentAST: operationFacts == null ? void 0 : operationFacts.documentAST,
operationName: newOperationName,
operations: operationFacts == null ? void 0 : operationFacts.operations
});
return operationFacts ? {
...operationFacts,
operationName: newOperationName
} : null;
};
$[8] = operationName;
$[9] = operations;
$[10] = schema;
$[11] = setOperationFacts;
$[12] = t4;
} else {
t4 = $[12];
}
const getAndUpdateOperationFacts = t4;
const runAtCursorRef = useRef(null);
let t5;
let t6;
if ($[13] !== operationName || $[14] !== operations || $[15] !== run || $[16] !== setOperationName) {
t5 = () => {
runAtCursorRef.current = (editor) => {
var _a;
if (!operations) {
run();
return;
}
const position = editor.getPosition();
const cursorIndex = editor.getModel().getOffsetAt(position);
let newOperationName_0;
for (const operation of operations) {
if (operation.loc && operation.loc.start <= cursorIndex && operation.loc.end >= cursorIndex) {
newOperationName_0 = (_a = operation.name) == null ? void 0 : _a.value;
}
}
if (newOperationName_0 && newOperationName_0 !== operationName) {
setOperationName(newOperationName_0);
}
run();
};
};
t6 = [operationName, operations, run, setOperationName];
$[13] = operationName;
$[14] = operations;
$[15] = run;
$[16] = setOperationName;
$[17] = t5;
$[18] = t6;
} else {
t5 = $[17];
t6 = $[18];
}
useEffect(t5, t6);
const {
monacoGraphQL,
monaco
} = useMonaco();
let t7;
if ($[19] !== copyQuery || $[20] !== getAndUpdateOperationFacts || $[21] !== initialQuery || $[22] !== mergeQuery || $[23] !== monaco || $[24] !== monacoGraphQL || $[25] !== monacoTheme || $[26] !== onEdit || $[27] !== operationName || $[28] !== prettifyEditors || $[29] !== setEditor || $[30] !== setOperationName || $[31] !== storage || $[32] !== updateActiveTabValues || $[33] !== uriInstanceId) {
t7 = () => {
if (!monaco || !monacoGraphQL) {
return;
}
const operationUri = URI.file(`${uriInstanceId}${URI_NAME.operation}`);
const variablesUri = URI.file(`${uriInstanceId}${URI_NAME.variables}`);
const {
validateVariablesJSON
} = MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS;
validateVariablesJSON[operationUri.toString()] = [variablesUri.toString()];
monacoGraphQL.setDiagnosticSettings(MONACO_GRAPHQL_DIAGNOSTIC_SETTINGS);
const model = getOrCreateModel({
uri: operationUri.path.replace("/", ""),
value: initialQuery
});
const editor_0 = createEditor(ref, {
model,
theme: monacoTheme
});
setEditor({
queryEditor: editor_0
});
const handleChange = debounce(100, () => {
const query = editor_0.getValue();
storage.set(STORAGE_KEY.query, query);
const operationFacts_0 = getAndUpdateOperationFacts(editor_0);
onEdit == null ? void 0 : onEdit(query, operationFacts_0 == null ? void 0 : operationFacts_0.documentAST);
if ((operationFacts_0 == null ? void 0 : operationFacts_0.operationName) && operationName !== operationFacts_0.operationName) {
setOperationName(operationFacts_0.operationName);
}
updateActiveTabValues({
query,
operationName: (operationFacts_0 == null ? void 0 : operationFacts_0.operationName) ?? null
});
});
getAndUpdateOperationFacts(editor_0);
const disposables = [model.onDidChangeContent(handleChange), editor_0.addAction({
...KEY_BINDINGS.runQuery,
run: (...t82) => {
const args = t82;
return runAtCursorRef.current(...args);
}
}), editor_0.addAction({
...KEY_BINDINGS.copyQuery,
run: copyQuery
}), editor_0.addAction({
...KEY_BINDINGS.prettify,
run: prettifyEditors
}), editor_0.addAction({
...KEY_BINDINGS.mergeFragments,
run: mergeQuery
}), editor_0, model];
return cleanupDisposables(disposables);
};
$[19] = copyQuery;
$[20] = getAndUpdateOperationFacts;
$[21] = initialQuery;
$[22] = mergeQuery;
$[23] = monaco;
$[24] = monacoGraphQL;
$[25] = monacoTheme;
$[26] = onEdit;
$[27] = operationName;
$[28] = prettifyEditors;
$[29] = setEditor;
$[30] = setOperationName;
$[31] = storage;
$[32] = updateActiveTabValues;
$[33] = uriInstanceId;
$[34] = t7;
} else {
t7 = $[34];
}
let t8;
if ($[35] !== monaco || $[36] !== monacoGraphQL) {
t8 = [monaco, monacoGraphQL];
$[35] = monaco;
$[36] = monacoGraphQL;
$[37] = t8;
} else {
t8 = $[37];
}
useEffect(t7, t8);
let t10;
let t9;
if ($[38] !== externalFragments || $[39] !== monaco || $[40] !== monacoGraphQL || $[41] !== referencePlugin || $[42] !== schema || $[43] !== setSchemaReference || $[44] !== setVisiblePlugin || $[45] !== uriInstanceId) {
t9 = () => {
if (!schema || !monaco || !monacoGraphQL) {
return;
}
monacoGraphQL.setSchemaConfig([{
uri: `${uriInstanceId}${URI_NAME.schema}`,
schema
}]);
monacoGraphQL.setExternalFragmentDefinitions([...externalFragments.values()]);
if (!referencePlugin) {
return;
}
let currentSchemaReference;
currentSchemaReference = null;
const disposables_0 = [monaco.languages.registerDefinitionProvider("graphql", {
provideDefinition(model_0, position_0, _token) {
const graphQLPosition = toGraphQLPosition(position_0);
const context = getContextAtPosition(model_0.getValue(), graphQLPosition, schema);
if (!context) {
return;
}
const {
typeInfo,
token
} = context;
const {
kind,
step
} = token.state;
if (kind === "Field" && step === 0 && typeInfo.fieldDef || kind === "AliasedField" && step === 2 && typeInfo.fieldDef || kind === "ObjectField" && step === 0 && typeInfo.fieldDef || kind === "Directive" && step === 1 && typeInfo.directiveDef || kind === "Variable" && typeInfo.type || kind === "Argument" && step === 0 && typeInfo.argDef || kind === "EnumValue" && typeInfo.enumValue && "description" in typeInfo.enumValue || kind === "NamedType" && typeInfo.type && "description" in typeInfo.type) {
currentSchemaReference = {
kind,
typeInfo
};
const {
lineNumber,
column
} = position_0;
const range = new Range(lineNumber, column, lineNumber, column);
return [{
uri: model_0.uri,
range
}];
}
currentSchemaReference = null;
}
}), monaco.languages.registerReferenceProvider("graphql", {
provideReferences(model_1, t112, _context, _token_0) {
var _a;
const {
lineNumber: lineNumber_0,
column: column_0
} = t112;
if (!currentSchemaReference) {
return;
}
setVisiblePlugin(referencePlugin);
setSchemaReference(currentSchemaReference);
(_a = onClickReferenceRef.current) == null ? void 0 : _a.call(onClickReferenceRef, currentSchemaReference);
const range_0 = new Range(lineNumber_0, column_0, lineNumber_0, column_0);
return [{
uri: model_1.uri,
range: range_0
}];
}
})];
return cleanupDisposables(disposables_0);
};
t10 = [schema, referencePlugin, setSchemaReference, setVisiblePlugin, externalFragments, uriInstanceId, monacoGraphQL, monaco];
$[38] = externalFragments;
$[39] = monaco;
$[40] = monacoGraphQL;
$[41] = referencePlugin;
$[42] = schema;
$[43] = setSchemaReference;
$[44] = setVisiblePlugin;
$[45] = uriInstanceId;
$[46] = t10;
$[47] = t9;
} else {
t10 = $[46];
t9 = $[47];
}
useEffect(t9, t10);
let t11;
if ($[48] !== props.className) {
t11 = clsx("graphiql-editor", props.className);
$[48] = props.className;
$[49] = t11;
} else {
t11 = $[49];
}
let t12;
if ($[50] !== props || $[51] !== t11) {
t12 = /* @__PURE__ */ jsx("div", { ref, tabIndex: 0, onKeyDown: onEditorContainerKeyDown, ...props, className: t11 });
$[50] = props;
$[51] = t11;
$[52] = t12;
} else {
t12 = $[52];
}
return t12;
};
export {
OperationEditor
};
//# sourceMappingURL=operation-editor.js.map