@graphcommerce/graphql 6.0.2-canary.1 → 6.0.2-canary.10

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 6.0.2-canary.10
+
+### Patch Changes
+
+- [#1883](https://github.com/graphcommerce-org/graphcommerce/pull/1883) [`ede93ae7f`](https://github.com/graphcommerce-org/graphcommerce/commit/ede93ae7f1d9239d1e827cce574085a1c264890b) - Added clickable links to measurePerformanceLink ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.9
+
+## 6.0.2-canary.8
+
+## 6.0.2-canary.7
+
+## 6.0.2-canary.6
+
+## 6.0.2-canary.5
+
+## 6.0.2-canary.4
+
+## 6.0.2-canary.3
+
+## 6.0.2-canary.2
+
 ## 6.0.2-canary.1
 
 ## 6.0.2-canary.0

package/lib/hyperlinker.ts

@@ -0,0 +1,84 @@
+'use strict'
+
+/*
+A hyperlink is opened upon encountering an OSC 8 escape sequence with the target URI. The syntax is
+OSC 8 ; params ; URI BEL|ST
+Following this, all subsequent cells that are painted are hyperlinks to this target. A hyperlink is closed with the same escape sequence, omitting the parameters and the URI but keeping the separators:
+OSC 8 ; ; BEL|ST
+const ST = '\u001B\\';
+ */
+const OSC = '\u001B]'
+const BEL = '\u0007'
+const SEP = ';'
+
+const hyperlinker = (text: string, uri: string) =>
+  [OSC, '8', SEP, SEP, uri, BEL, text, OSC, '8', SEP, SEP, BEL].join('')
+
+function parseVersion(versionString: string): { major: number; minor: number; patch: number } {
+  if (/^\d{3,4}$/.test(versionString)) {
+    // Env var doesn't always use dots. example: 4601 => 46.1.0
+    const m = /(\d{1,2})(\d{2})/.exec(versionString) || []
+    return {
+      major: 0,
+      minor: parseInt(m[1], 10),
+      patch: parseInt(m[2], 10),
+    }
+  }
+
+  const versions = (versionString || '').split('.').map((n) => parseInt(n, 10))
+  return {
+    major: versions[0],
+    minor: versions[1],
+    patch: versions[2],
+  }
+}
+
+function supportsHyperlink(): boolean {
+  const {
+    CI,
+    FORCE_HYPERLINK,
+    NETLIFY,
+    TEAMCITY_VERSION,
+    TERM_PROGRAM,
+    TERM_PROGRAM_VERSION,
+    VTE_VERSION,
+    VERCEL,
+  } = process.env
+
+  if (FORCE_HYPERLINK) {
+    return !(FORCE_HYPERLINK.length > 0 && parseInt(FORCE_HYPERLINK, 10) === 0)
+  }
+
+  if (NETLIFY) return true
+  if (process.stdout.isTTY || process.stderr.isTTY) return false
+  if (process.platform === 'win32') return false
+  if (CI) return false
+  if (VERCEL) return false
+  if (TEAMCITY_VERSION) return false
+
+  if (TERM_PROGRAM) {
+    const version = parseVersion(TERM_PROGRAM_VERSION || '')
+
+    switch (TERM_PROGRAM) {
+      case 'iTerm.app':
+        if (version.major === 3) return version.minor >= 1
+        return version.major > 3
+      case 'WezTerm':
+        return version.major >= 20200620
+      case 'vscode':
+        return version.major > 1 || (version.major === 1 && version.minor >= 72)
+    }
+  }
+
+  if (VTE_VERSION) {
+    // 0.50.0 was supposed to support hyperlinks, but throws a segfault
+    if (VTE_VERSION === '0.50.0') return false
+    const version = parseVersion(VTE_VERSION)
+    return version.major > 0 || version.minor >= 50
+  }
+
+  return false
+}
+
+export const cliHyperlink = (text: string, uri: string) =>
+  supportsHyperlink() ? hyperlinker(text, uri) : text

package/measurePerformanceLink.ts

@@ -1,34 +1,26 @@
 /* eslint-disable no-console */
 import { ApolloLink } from '@apollo/client'
+import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
+import { print } from 'graphql'
+import { cliHyperlink } from './lib/hyperlinker'
 
 const running = new Map<
   string,
-  { start: Date; end?: Date; internalStart?: Date; operationName: string }
->()
-
-interface TracingFormat {
-  version: 1
-  startTime: string
-  endTime: string
-  duration: number
-  execution: {
-    resolvers: {
-      path: (string | number)[]
-      parentType: string
-      fieldName: string
-      returnType: string
-      startOffset: number
-      duration: number
-    }[]
+  {
+    start: Date
+    end?: Date
+    internalStart?: Date
+    operationName: [string, string]
+    additional?: [string, string]
   }
-}
+>()
 
 const renderLine = (line: {
   serverStart: number
   requestStart: number
   requestEnd: number
   colDivider: number
-  additional: string[]
+  additional: (string | [string, string])[]
 }) => {
   const duration = line.requestEnd - line.requestStart
   const serverDuration = duration - line.serverStart
@@ -88,19 +80,20 @@ export const flushMeasurePerf = () => {
         value.operationName,
         // `${duration - (duration - serverStart)}ms`,
         `${duration - serverStart}ms`,
+        value.additional ?? '',
       ],
       colDivider,
     })
   })
 
   const items = [
-    ['Operation', 'Mesh', 'Timeline'],
+    ['Operation', 'Mesh', ' Source', 'Timeline'],
     ...lines,
     renderLine({
       serverStart: 0,
       requestStart: 0,
       requestEnd: end,
-      additional: [`Total time`, `${end}ms`],
+      additional: [`Total time`, `${end}ms`, ''],
       colDivider,
     }),
   ]
@@ -109,16 +102,22 @@ export const flushMeasurePerf = () => {
   const colWidths: number[] = Array(items[0].length).fill(0)
   items.forEach((item) => {
     item.forEach((t, index) => {
-      colWidths[index] = Math.max(colWidths[index], t.length)
+      colWidths[index] = Math.max(colWidths[index], Array.isArray(t) ? t[0].length : t.length)
     })
   })
 
   // padd the items to the max length
   items.forEach((item) => {
     item.forEach((_, index) => {
-      item[index] = `${item[index].padEnd(colWidths[index], ' ')}${
-        index !== item.length - 1 ? `` : ''
-      }`
+      const [str, link] = (
+        Array.isArray(item[index]) ? item[index] : [item[index], item[index]]
+      ) as [string, string]
+
+      const val = (Array.isArray(item[index]) ? item[index][1] : item[index]) as string
+
+      const padLength = colWidths[index] + (val.length - str.length)
+
+      item[index] = `${val.padEnd(padLength, ' ')}${index !== item.length - 1 ? `` : ''}`
     })
   })
 
@@ -147,19 +146,51 @@ export const measurePerformanceLink = new ApolloLink((operation, forward) => {
       Object.keys(operation.variables).length > 0 ? `(${JSON.stringify(operation.variables)})` : ''
     const operationString = `${operation.operationName}${vars}`
 
-    running.set(operationString, { start: new Date(), operationName: operation.operationName })
+    running.set(operationString, {
+      start: new Date(),
+      operationName: [operation.operationName, operation.operationName],
+    })
     markTimeout()
 
-    // console.info(`GraphQL start ${operationString}`)
     return forward(operation).map((data) => {
-      const tracing = data.extensions?.tracing as TracingFormat | undefined
+      const httpDetails: MeshFetchHTTPInformation[] | undefined = data.extensions?.httpDetails
+
+      let additional = [``, ``] as [string, string]
+      if (httpDetails) {
+        httpDetails.forEach((d) => {
+          const requestUrl = new URL(d.request.url)
+          requestUrl.searchParams.delete('extensions')
+          const title = `${d.sourceName} ${d.responseTime}ms`
+          additional = [
+            `${additional[0]} ${title}`,
+            `${additional[1]} ${cliHyperlink(title, requestUrl.toString().replace(/\+/g, '%20'))}`,
+          ]
+        })
+      }
 
       // Called after server responds
+      const query = [
+        `# Variables: ${JSON.stringify(operation.variables)}`,
+        `# Headers: ${JSON.stringify(operation.getContext().headers)}`,
+        print(operation.query),
+      ].join('\n')
+
+      const meshUrl = new URL(`${import.meta.graphCommerce.canonicalBaseUrl}/api/graphql`)
+      meshUrl.searchParams.set('query', query)
+
       running.set(operationString, {
-        internalStart: tracing ? new Date(tracing.startTime) : undefined,
         start: operation.getContext().measurePerformanceLinkStart as Date,
         end: new Date(),
-        operationName: operation.operationName,
+        operationName: [operation.operationName, operation.operationName],
+        additional,
+        // [
+        //   operation.operationName,
+        //   cliHyperlink(operation.operationName, meshUrl.toString()),
+        // ],
+        // additional: [
+        //   `🔗 ${additional[0]}`,
+        //   `${cliHyperlink('🔗', meshUrl.toString())} ${additional[1]}`,
+        // ],
       })
 
       markTimeout()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.1",
+  "version": "6.0.2-canary.10",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",
-    "@graphcommerce/graphql-codegen-near-operation-file": "6.0.2-canary.1",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "6.0.2-canary.1",
+    "@graphcommerce/graphql-codegen-near-operation-file": "6.0.2-canary.10",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "6.0.2-canary.10",
     "@graphql-codegen/add": "4.0.1",
     "@graphql-codegen/fragment-matcher": "4.0.1",
     "@graphql-codegen/introspection": "3.0.1",
@@ -29,9 +29,9 @@
     "graphql": "16.6.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.1",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.1",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.1"
+    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.10",
+    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.10",
+    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.10"
   },
   "peerDependencies": {
     "react": "^18.2.0",