temp [ci skip]

Author: benfdking

vscode/bus/src/callbacks.ts

@@ -5,8 +5,9 @@ export type Callback = {
   queryRequest: {
     requestId: string
     url: string
-    params: Record<string, string>
-    body: Record<string, any>
+    method?: string
+    params?: Record<string, string>
+    body?: Record<string, any>
   }
 }
 
@@ -29,6 +30,10 @@ export type VSCodeCallback = {
   changeFocusOnFile: {
     path: string
   }
+  queryResponse: {
+    requestId: string
+    response: any
+  }
 }
 
 export type VSCodeEvent = {

vscode/react/src/api/instance.ts

@@ -1,4 +1,4 @@
-import { sendVSCodeMessage } from '@/hooks/vscode'
+import { sendVSCodeMessage } from '@/utils/vscodeapi'
 import { isErr } from '@bus/result'
 
 declare global {
@@ -42,7 +42,6 @@ export async function fetchAPI<T = any, B extends object = any>(
   // Create a promise that will resolve when we get a response with matching ID
   return new Promise((resolve, reject) => {
     const requestId = `query_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-    // Set up listener for the response
     const messageHandler = (event: MessageEvent) => {
       if (
         event.data &&
@@ -68,7 +67,7 @@ export async function fetchAPI<T = any, B extends object = any>(
       requestId,
       url: config.url,
       params: config.params as any,
-      data: config.data,
+      body: config.data,
       method: config.method,
     })
 

…react/src/utils/additional-components.ts …ents-additional/additional-components.tsvscode/react/src/utils/additional-components.ts renamed to vscode/react/src/components-additional/additional-components.ts vscode/react/src/utils/additional-components.ts renamed to vscode/react/src/components-additional/additional-components.ts

@@ -1,30 +1,10 @@
-import { getVSCodeAPI } from '@/utilsutils/vscodeapi'
-import type { Callback } from '@bus/callbacks'
+import { sendVSCodeMessage } from '@/utils/vscodeapi'
 
 /**
  * use this hook to send messages to the vscode extension
  *
  * when deving the extension, we use an iframe to load the react app
  * so we need to send messages to the parent window
  */
-export const useVSCode = (): (<K extends keyof Callback>(
-  callbackName: K,
-  payload: Callback[K],
-) => void) => {
-  return sendVSCodeMessage
-}
+export const useVSCode = () => sendVSCodeMessage
 
-export const sendVSCodeMessage = (
-  callbackName: string,
-  payload: any,
-): void => {
-  const eventPayload = {
-    key: callbackName,
-    payload: payload,
-  }
-  if (window !== window.parent) {
-    window.parent.postMessage(eventPayload, '*')
-  } else {
-    getVSCodeAPI().postMessage(eventPayload)
-  }
-}

vscode/react/src/utils/tbk-components.js …/components-additional/tbk-components.jsvscode/react/src/utils/tbk-components.js renamed to vscode/react/src/components-additional/tbk-components.js vscode/react/src/utils/tbk-components.js renamed to vscode/react/src/components-additional/tbk-components.js

@@ -7,7 +7,7 @@ import { routeTree } from './routeTree.gen'
 
 import './styles.css'
 import reportWebVitals from './reportWebVitals.ts'
-import { EventBusProvider } from './utilsutils/eventBus.tsx'
+import { EventBusProvider } from './hooks/eventBus.tsx'
 
 // Create a new router instance
 const router = createRouter({

vscode/react/src/utilsutils/eventBus.tsx vscode/react/src/hooks/eventBus.tsxvscode/react/src/utilsutils/eventBus.tsx renamed to vscode/react/src/hooks/eventBus.tsx

@@ -10,10 +10,8 @@ import { ModelLineage } from '@/components/graph/ModelLineage'
 import { useVSCode } from '@/hooks/vscode'
 import React from 'react'
 import { ModelSQLMeshModel } from '@/domain/sqlmesh-model'
-import { useEventBus } from '@/utilsutils/eventBus'
 
 export function LineagePage() {
-  const { emit } = useEventBus()
   // Handle messages from VSCode extension
   React.useEffect(() => {
     const handleMessage = (event: MessageEvent) => {

vscode/react/src/hooks/vscode.ts

@@ -0,0 +1,22 @@
+import type { VSCodeCallback } from "@bus/callbacks"
+
+/**
+ * add event listener to the window.
+ *
+ * returns a function to remove the event listener.
+ */
+export const addEventListener = <K extends keyof VSCodeCallback>(
+    handlerKey: K,
+    handler: (payload: VSCodeCallback[K]) => void,
+): (() => void) => {
+    const handleMessage = (event: MessageEvent) => {
+        const { key, payload } = event.data
+        if (key === handlerKey) {
+            handler(payload)
+        }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => {
+        window.removeEventListener('message', handleMessage)
+    }
+}

vscode/react/src/main.tsx

@@ -0,0 +1,39 @@
+import type { Callback } from "@bus/callbacks"
+
+/**
+ * send a message to the vscode extension.
+ *
+ * This should generally not be used directly, but rather through the useVSCode hook.
+ */
+export const sendVSCodeMessage = <K extends keyof Callback> (
+  callbackName: K,
+  payload: Callback[K],
+): void => {
+  const eventPayload = {
+    key: callbackName,
+    payload: payload,
+  }
+  if (window !== window.parent) {
+    window.parent.postMessage(eventPayload, '*')
+  } else {
+    getVSCodeAPI().postMessage(eventPayload)
+  }
+}
+
+let VSCODE_API: VSCodeAPI | undefined
+
+interface VSCodeAPI {
+  postMessage: (message: any) => void
+}
+
+function getVSCodeAPI(): VSCodeAPI {
+  if (!VSCODE_API) {
+    // @ts-ignore
+    VSCODE_API = acquireVsCodeApi()
+  }
+  if (!VSCODE_API) {
+    throw new Error('VSCode API not initialized')
+  }
+  return VSCODE_API
+}
+