How To Add Tab frames To VSC Log Panel

[tbpassin]

leoJS logs to a tab in one of the standard VSC panes, usually located at the bottom right of the VSC window. When there is time to write up some guidance on programming leoJS, please explain how to add another tab there and communicate with it.

In Leo, I have some applications that live in a tab in the Log pane, and I'd like to be able to do something similar in leoJS. They need to be able to respond to user typed input and clicks, and to display clickable links that navigate to places in the outline.

[boltex]

Thanks for this great question!

This is totally doable. I'll have a tutorial ready in a few days in which I show how to use it on the web, and I'll include examples of scripting that use the available VSCode UI and API.

Your usage case is a perfect example for that! 😄

[tbpassin]

Thanks. Here is a screen shot that shows one of these apps in the Leo Log pane. It's the Bookmarks app. The app is in its own tab in the Log pane, on the right in the image, as you can see.

[tbpassin]

I'd like to generalize this a bit. In VSC, it would probably be better to be able to open a new panel in the main area that editor tabs are opened in. I don't know the VSC name for that area.

[boltex]

@tbpassin great question! :)

To help everybody look at the right place in VSCode's documentation about those parts of the interface, Here are a few pointers 😄

The 'log pane' type area controls are called 'output channels'. See https://code.visualstudio.com/api/extension-capabilities/common-capabilities#output-channel.

The other 'area' you inquired about, to put custom content where the main text editors lay, is called the 'editor group'. See https://code.visualstudio.com/api/extension-capabilities/extending-workbench. In that area, you could either:

1. Output your custom content in what are called 'webviews', for any kind of content. See https://code.visualstudio.com/api/extension-guides/webview.
2. Or, to output just 'read-only-plain-text' then a virtual-document could be enough, see https://code.visualstudio.com/api/extension-guides/virtual-documents.

I will give more explanations and suggestions on how to extend leojs with 'plugin' type extensions in the tutorial I intend to make. (For early birds who want to experiment right away, LeoJS already exposes the 'g' object to other extensions via the standard 'activate' method. See https://code.visualstudio.com/api/references/vscode-api#extensions )

Alternatively, to extend the vscode interface or use it's input boxes, message panels, etc. without creating a whole new extension, e.g. by simply making regular scripts to be ran with Ctrl+B, etc. (or @button / @commands) you can access the VSCode API from within your scripts with the 'vscode' main API object, which is exposed as g.app.vscode

To demonstrate, here's an example script which I posted earlier in september in Leo's google group forums:

@language javascript
const vscode = g.app.vscode;
g.es("hahahaha");
// 'await' for doCommandByName required only if other code in script is 'awaited'.
await c.doCommandByName('insert-headline-time');

const userInput = await vscode.window.showInputBox({
    placeHolder: 'Enter something', // Placeholder text in the input box
    prompt: 'Please enter some text:', // Prompt message above the input box
});
if (userInput === undefined) {
    g.es('User canceled the input.');
} else {
    g.es('User input:', userInput);
}
try {
    const apiUrl = 'https://jsonplaceholder.typicode.com/users';
    const response = await fetch(apiUrl);
    g.es("about to call");
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    const data = await response.json();
    g.es("got it!!", JSON.stringify(data));
} catch (error) {
    g.es("oh no!");
    console.error('Fetch error:', error);
}

I also need to make sure the 'doHook' / 'plugin' equivalent system is working properly. (Issue about that is https://github.com/boltex/leojs/issues/90 )

I Hope those last paragraphs give enough details for someone to start experimenting and produce some results that work! I'll continue in a few days with a proper tutorial !

[boltex]

Note: This short and easy tutorial is the perfect place to start https://code.visualstudio.com/api/get-started/your-first-extension

[boltex]

@tbpassin I've updated the script samples repository for LeoJS at https://github.com/boltex/scripting-samples-leojs

The one that covers the original question of this issue is the 'webview-from-files' script sample, along with the two following ones: 'reload-webview' and 'send-to-webview'.

I've also added script samples that cover the use cases you brought up on the google group leo forums:

• how to launch/execute an arbitrary executable, or command: the 'run-command' and 'run-external-bin' scripts.
• how to create/write to a file: the 'write-file' script.

I'll close this issue with this comment since the script samples repository at https://github.com/boltex/scripting-samples-leojs now covers most use-cases for UI interactions, and will be updated as well in the future with more use cases.

Thanks again Thomas for those great UI interaction scenarios that you've asked about! Those script samples would not be encompassing all those cases otherwise!