vscode extension

.gitignore

@@ -136,3 +136,4 @@ schema.graphql
 *.cookie
 dev.db-journal
 .DS_Store
+out

apps/ui/src/components/trace/editor/editor.tsx

@@ -1,26 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useParams } from "react-router-dom";
 
 import { ClientContext } from "../../../context/client";
 import { IDS } from "../../../testing";
 import { Query } from "./query";
 import { Variables } from "./variables";
 
-export function Editor() {
+export function Editor(props: React.PropsWithChildren<{ traceId?: string }>) {
   const { client } = useContext(ClientContext);
-  const params = useParams();
 
   const { data: trace } = useQuery({
-    queryKey: ["singleTrace", params.traceId],
+    queryKey: ["singleTrace", props.traceId],
     queryFn: async () => {
-      if (!params.traceId) {
+      if (!props.traceId) {
         return [];
       }
 
       const trace = await client.trace.findMany({
         where: {
-          id: params.traceId,
+          id: props.traceId,
         },
         includeRootSpan: true,
       });

apps/ui/src/components/trace/trace.tsx

@@ -42,7 +42,7 @@ export function Trace() {
     >
       <TraceHeader trace={trace} />
       <div className="flex flex-grow gap-4 h-96 items-center ">
-        <Editor />
+        <Editor traceId={params.traceId} />
         <div className="flex flex-col flex-1 basis-8/12 w-full gap-4 h-full">
           <TraceViewer trace={trace} />
           <SchemaTraces />

package.json

@@ -3,8 +3,8 @@
   "version": "0.0.0-alpha.97",
   "private": true,
   "scripts": {
-    "dev": "cross-env turbo dev --filter '!graphql-debugger' --filter '!@graphql-debugger/landing-page-app' --filter '!@graphql-debugger/landing-page-server' --concurrency=30",
-    "build": "turbo build",
+    "dev": "cross-env turbo dev --filter '!graphql-debugger' --filter '!@graphql-debugger/landing-page-app' --filter '!@graphql-debugger/landing-page-server' --filter '!@graphql-debugger/vscode-ui' --concurrency=30",
+    "build": "turbo build ",
     "release": "cross-env DEBUG=\"@graphql-debugger:*\" node ./packages/utils/build/release.js",
     "test:sequential": "pnpm recursive exec -- sh -c 'pnpm run test || (echo \"Tests failed!\" && exit 1)'",
     "test": "turbo test",

packages/graphql-schema/src/index.ts

@@ -13,3 +13,5 @@ export function createServer({ client }: { client: DebuggerClient }) {
     context: context({ client }),
   });
 }
+
+export { createSchema };

plugins/vscode/extension/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "ms-vscode.extension-test-runner"
+  ]
+}

plugins/vscode/extension/.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
+}

plugins/vscode/extension/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "files.exclude": {
+    "out": false
+  },
+  "search.exclude": {
+    "out": true
+  },
+  "typescript.tsc.autoDetect": "off"
+}

plugins/vscode/extension/.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

plugins/vscode/extension/.vscodeignore

@@ -0,0 +1,11 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*

plugins/vscode/extension/README.md

@@ -0,0 +1,13 @@
+# @graphql-debugger/vscode-extension
+
+- [graphql-debugger.com](http://www.graphql-debugger.com)
+
+[![npm version](https://badge.fury.io/js/@graphql-debugger%2Fvscode-extension.svg)](https://badge.fury.io/js/@graphql-debugger%2Fvscode-extension) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## About
+
+VSCode extension for GraphQL Debugger. Download the extension from the VSCode Marketplace.
+
+## License
+
+MIT - Rocket Connect - https://github.com/rocket-connect

plugins/vscode/extension/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@graphql-debugger/vscode-extension",
+  "displayName": "GraphQL Debugger",
+  "description": "Debug your GraphQL server",
+  "engines": {
+    "vscode": "^1.86.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "version": "0.0.0-alpha.97",
+  "main": "./out/extension.js",
+  "files": [
+    "out"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rocket-connect/graphql-debugger.git"
+  },
+  "homepage": "https://github.com/rocket-connect/graphql-debugger#readme",
+  "contributes": {
+    "commands": [
+      {
+        "command": "graphql-debugger.openPanel",
+        "title": "Open GraphQL Debugger"
+      }
+    ],
+    "menus": {
+      "editor/title": [
+        {
+          "when": "resourceLangId == graphql",
+          "command": "graphql-debugger.openPanel",
+          "group": "navigation"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "vscode:prepublish": "npm run compile",
+    "build": "tsc -p ./ && npx ts-node ./src/print-schema-for-debugging.ts",
+    "watch": "tsc -watch -p ./",
+    "pretest": "npm run compile && npm run lint",
+    "lint": "eslint src --ext ts",
+    "test": "vscode-test"
+  },
+  "peerDependencies": {
+    "graphql": "^16.0.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "@graphql-debugger/vscode-ui": "workspace:^",
+    "@graphql-debugger/adapter-proxy": "workspace:^",
+    "@graphql-debugger/client": "workspace:^",
+    "@graphql-debugger/trace-schema": "workspace:^",
+    "@graphql-debugger/utils": "workspace:^",
+    "@graphql-debugger/graphql-schema": "workspace:^",
+    "@graphql-tools/schema": "10.0.2",
+    "@graphql-tools/utils": "10.0.13"
+  },
+  "devDependencies": {
+    "@types/vscode": "1.86.0",
+    "@vscode/test-cli": "0.0.4",
+    "@vscode/test-electron": "2.3.9",
+    "typescript": "5.3.3",
+    "ts-node": "10.9.2"
+  }
+}

plugins/vscode/extension/src/extension.ts

@@ -0,0 +1,129 @@
+import { ProxyAdapter } from "@graphql-debugger/adapter-proxy";
+import { traceSchema } from "@graphql-debugger/trace-schema";
+import { hashSchema } from "@graphql-debugger/utils";
+
+import fs from "fs";
+import { buildSchema } from "graphql";
+import * as vscode from "vscode";
+
+export function activate(context: vscode.ExtensionContext) {
+  const adapter = new ProxyAdapter();
+
+  const disposable = vscode.commands.registerCommand(
+    "graphql-debugger.openPanel",
+    async () => {
+      const panel = vscode.window.createWebviewPanel(
+        "graphqlDebugger",
+        "GraphQL Debugger",
+        vscode.ViewColumn.Beside,
+        {
+          enableScripts: true,
+          localResourceRoots: [
+            vscode.Uri.parse("http://localhost:16686"),
+            vscode.Uri.joinPath(
+              context.extensionUri,
+              "node_modules",
+              "@graphql-debugger",
+              "vscode-ui",
+              "build",
+            ),
+          ],
+        },
+      );
+
+      const editor = vscode.window.activeTextEditor;
+
+      if (editor) {
+        const document = await vscode.workspace.openTextDocument(
+          editor.document.uri,
+        );
+
+        const text = document.getText();
+        const schema = buildSchema(text);
+
+        const tracedSchema = traceSchema({ schema, adapter });
+        const hash = hashSchema(tracedSchema);
+        let schemaid: string | undefined = undefined;
+
+        try {
+          const debuggerSchema = await adapter.schema.findFirst({
+            where: {
+              hash,
+            },
+          });
+
+          schemaid = debuggerSchema?.id;
+        } catch (e) {
+          console.error(e);
+          vscode.window.showInformationMessage(`Error finding schema: ${e}`);
+        }
+
+        if (!schemaid) {
+          vscode.window.showInformationMessage("Schema not found.");
+        }
+
+        panel.webview.html = getWebviewContent(
+          context,
+          panel.webview,
+          schemaid as string,
+        );
+      }
+    },
+  );
+
+  context.subscriptions.push(disposable);
+}
+
+function getWebviewContent(
+  context: vscode.ExtensionContext,
+  webview: vscode.Webview,
+  schemaId: string,
+) {
+  const indexPath = vscode.Uri.joinPath(
+    context.extensionUri,
+    "node_modules",
+    "@graphql-debugger",
+    "vscode-ui",
+    "build",
+    "index.html",
+  );
+  let html = fs.readFileSync(indexPath.fsPath, "utf8");
+
+  html = html.replace(/(href|src)="([^"]*)"/g, (match, p1, p2) => {
+    const assetPath = vscode.Uri.joinPath(
+      context.extensionUri,
+      "node_modules",
+      "@graphql-debugger",
+      "vscode-ui",
+      "build",
+      p2,
+    );
+    const assetUri = webview.asWebviewUri(assetPath);
+    return `${p1}="${assetUri}"`;
+  });
+
+  const nonce = getNonce();
+
+  const scriptToSetSchemaId = `<script nonce="${nonce}">localStorage.setItem("SCHEMA_ID", "${schemaId}");</script>`;
+
+  html = html.replace(
+    /<meta http-equiv="Content-Security-Policy".*?>/,
+    `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} https:; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}';">`,
+  );
+
+  html = html.replace("</head>", `${scriptToSetSchemaId}</head>`);
+
+  return html;
+}
+
+function getNonce() {
+  let text = "";
+  const possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let i = 0; i < 32; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
+
+export function deactivate() {}

plugins/vscode/extension/src/print-schema-for-debugging.ts

@@ -0,0 +1,28 @@
+import { DebuggerClient } from "@graphql-debugger/client";
+import { createSchema } from "@graphql-debugger/graphql-schema";
+import { traceSchema } from "@graphql-debugger/trace-schema";
+
+import fs from "fs";
+import { printSchema } from "graphql";
+import path from "path";
+
+const printPath = path.join(__dirname, "../", "out/", "schema.gql");
+
+// Prints the development schema in this package for dev usage
+// Run `pnpm run dev` at the root of the monorepo to run debugger in debug mode
+// Run the development version of the extension using F5 or the "Run Extension" command
+// Open this schema file and it will trigger the extension
+async function printSchemaForDebugging() {
+  const client = new DebuggerClient();
+  const { schema } = createSchema({ client });
+
+  const tracedSchema = traceSchema({ schema, adapter: client.adapter });
+
+  const printed = printSchema(tracedSchema);
+
+  await fs.promises.writeFile(printPath, printed);
+
+  process.exit(0);
+}
+
+printSchemaForDebugging();

plugins/vscode/extension/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "compilerOptions": {
+    "module": "Node16",
+    "target": "ES2022",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "out",
+    "declarationMap": true,
+    "declaration": true,
+    "rootDir": "./src/",
+  },
+  "exclude": ["tests/"],
+  "include": ["src/**/*"],
+}

plugins/vscode/ui/README.md

@@ -0,0 +1,13 @@
+# @graphql-debugger/vscode-ui
+
+[![npm version](https://badge.fury.io/js/@graphql-debugger%2F/vscode-ui.svg)](https://badge.fury.io/js/@graphql-debugger%2F/vscode-ui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[graphql-debugger.com](http://www.graphql-debugger.com)
+
+## About
+
+This is the user interface for the GraphQL Debugger VSCode Extension.
+
+## License
+
+MIT - Rocket Connect - https://github.com/rocket-connect