[feature]: Add support for calling the vscode API directly via svelte

[SkySingh04]

Is there an existing feature request for this?

• [X] I have searched the existing issues

Summary

Repository : https://github.com/keploy/vscode-extension

The current version of the vscode extension uses sidebar.js inorder to call the Vsode API and perform interactions with the Typescript backend using vscode.Postmessage. Here is an example of this:

if (openRecordPageButton) {
  openRecordPageButton.addEventListener('click', async () => {
    console.log("openRecordPageButton clicked");
    vscode.postMessage({
      type: "navigate",
      value: "Keploy"
    });
  });
}

Ideally, we should be able to call the vscode API directly from our svelte files inorder to remove redundacny and ultimately cut the need for the presence of this extra script.

References:

Ben awad has implemented this in his tutorial and the same can be implemented via following it : https://www.youtube.com/watch?v=a5DX5pQ9p5M&t=9571s

Deliverables:

• Be able to call the vscode api from svelte and make calls to typescript backend using vscode.postMessage from svelte.
• Be able to listen to messages from typescript backend using window.addEventListener('message',()=>{}) from svelte.
• Ultimately reduce the need for sidebar.js file and migrate all functionality to respective svelte files.

Why should this be worked on?

Improvements to code quality

Repository

keploy

[ayush3160]

I would like to work on this

[SkySingh04]

Go for it! Do ping if you face any difficulty!