How to Modify LeoJS From Within LeoJS?

[Thomas Passin]

Using Leo, we can edit LeoPyRef, save the edits, restart Leo, and test our changes.  With LeoJS, how can we do the equivalent: editing the code of LeoJS and testing it?

[Edward K. Ream]

On Tuesday, April 30, 2024 at 10:52:57 AM UTC-5 Thomas wrote:

Using Leo, we can edit LeoPyRef, save the edits, restart Leo, and test our changes.  With LeoJS, how can we do the equivalent: editing the code of LeoJS and testing it?

Interesting question. I am using a hybrid approach:

Develop with either Leo or LeoJS. Test using either the pytest plugin for vs-code or with Leo itself.

Edward

[Félix]

Thanks for this great question Thomas!

(I'll list a few ways, some of which you already know, but I'll list them all for other people to read about in case they didn't know)

First of all, like for the original Leo, a good way to customize the behavior is to write Leo Scripts in the body text of a node (or an outline of many nodes, as scripts can span many nodes and are affected by @others and sections references just like @files.) and use such scripts either in @button, or @command nodes. (Those can even be placed in your leoSettings.leo to be available in all other opened Leo documents.)

See this repository for sample Leo Scripts that address many use cases of UI interaction in VSCode from LeoJS: https://github.com/boltex/scripting-samples-leojs

Another way would be to write a VSCode extension that uses the LeoJS API which exposes the 'g' object. (so that the extension would be a 'LeoJS plugin')  With which you can access to all of LeoJS. 

See this repository for a basic 'hello world'  VSCode   extension that interacts with the LeoJS extension through it's exposed API: https://github.com/boltex/extension-sample-leojs

(See also this easy & short tutorial at https://code.visualstudio.com/api/get-started/your-first-extension on how to build and run an extension from source if you've never built a VSCode extension before.)

Lastly, for modifying LeoJS itself (instead of running scripts from custom @commands or @buttons, or building an extension and accessing the LeoJS global 'g' object) you would just need to clone the LeoJS repository. To then build and run it would be the same process as any of the VSCode sample extensions, such as this hello-world extension.  (That is to say, running the 'npm install' in the repository folder command to get all dependencies, and pressing F5 to start the 'run and debug' command in VSCode.)

Hope this helps, and please don't hesitate to ask more questions or propose suggestions  :)

Félix

[Thomas Passin]

On Friday, May 3, 2024 at 9:45:46 PM UTC-4 Félix wrote:

Thanks for this great question Thomas!

Lastly, for modifying LeoJS itself (instead of running scripts from custom @commands or @buttons, or building an extension and accessing the LeoJS global 'g' object) you would just need to clone the LeoJS repository. To then build and run it would be the same process as any of the VSCode sample extensions, such as this hello-world extension.  (That is to say, running the 'npm install' in the repository folder command to get all dependencies, and pressing F5 to start the 'run and debug' command in VSCode.)

This is where I lose track of what to do.  So far as I know up until now, an extension needs to packaged in a particular way with certain metadata.  I only know how to install such packaged extensions from the marketplace.  I suppose I need to know how to run an extension when one has not gone through all that packaging process and is not using the marketplace.  Of course, with Leo-Python you don't have to do anything special: the code is just there and you run it.

(BTW I have already cloned the repo).

Another aspect of running one's modified LeoJS code is how to *not* run the existing LeoJS (the marketplace extension) without de-installing it.

[Robert-Felix]

>    I only know how to install such packaged extensions from the marketplace.

It's way simpler than you think: When developing and/or building an extension (to try out new features that you've added to the LeoJS codebase itself), you dont build a VSIX, nor go through the packaging process of all the metadata and so on - Here's what to do...

Having Node.js and Git installed:

You clone the repo and you open it with vscode as a workspace. (cd into the repo and launch vscode with 'vscode .' the dot means open THIS folder with vscode, not some individual file(s) )

 1- run the 'npm install'  command in a terminal, (or in vscode's integrated terminal) this will install all the project folder's dependencies.

 2- you just press F5 in vscode to compile and run (this will start a new vscode window with the NEW version of the extension running, replacing the existing LeoJS without de-installing it) That new vscode window can be live-debugged, stepped through, and inspected from the original vscode window. 

Tada!! 

( I would recommend going through this very short tutorial https://code.visualstudio.com/api/get-started/your-first-extension in case the above didnt work )

Thanks again for trying out all that stuff ! I know how strange using a new language/framework can feel when coming from an unrelated language&environment paradigm !

Félix

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leo-editor/ac9e65e0-0047-42b0-ad7b-17d8a13470fan%40googlegroups.com.