What I wish Nova provided

I got Nova like two months ago and started bringing my extensions from Atom (Komodo Edit). Im getting more familiar with the API and would like to share the things I wish Nova had:

  1. A nova.workspace.onDidChangeActiveTextEditor event to monitor which editor is active.

  2. A TextEditor.focus() method to make a TextEditor the activeTextEditor.

  3. A sidebar that could provide a basic sandboxed Webkit View to be able to build advance UIs using html.

  4. A modal panel with a sandboxed Webkit View to be able to build advance UIs using html.

  5. Both of these could use a new HTMLView class with a couple of events (open, render, resize, close, etc) and expose the document to manipulate the DOM.

  6. Dynamic contextual menus on the TreeView. The TreeView could expose a hook like onContextualMenu(element) and we could return null or an array of simple objects or an array of “Command”. These entries could be appended to the ones defined in extension.json.

  7. Expose more of the built in functionality by means of files that we can hack and more events.

For example instead of me writing a new syntax and extension could hook callback to particular events fired by syntax, symbols, etc. For example: events for autocomplete, right-click on editor, symbol parsed, etc and let me operate on those things.

5 Likes

I just released a documentation-reference extension that was originally trying to coerce TreeView into displaying meaningful API information (about whatever one was working on), but I had to give up on that direction and just go with loading an external browser window instead.

An HTML (or even Markdown) view for the panels would open up a lot of possibilities!

1 Like

While very versatile, a HTML/MD UI system would break the native macOS feel this app is known for.

I think the best solution is for Panic to maken an API which allows us to construct interfaces using their UI components.

4 Likes

I don’t think that creating dynamic UI that are scriptable from JavaScriptCore is a trivial undertaking, and would require quite an upkeep to follow OS changes.

In ATOM/VSCode and others the HTML ui is already pre-build for you and the app provides its own css styling and web components that follow the look and feel of the APP.

In Nova they could simply expose an api to open a Window or Add a Panel, in either case they already build the webview with their own html/css/js our html goes inside a preset dom element they created. They’re html/css/js with web-components and styling for basic ui components. IN VSCode/Atom they have a style guide that provide css classes and variables for pretty much everything you would use in a basic ui.

Similar to the treeView in our extension we implement a controller Panel/Window with events.
A render(element) will be the place to build our ui. Extensions run on a separate process so they would have to provide a way to expose some of the basic functionality of document to create elements or we either return a string with html in our render. Similar to window.postMessage() they could expose an api so JS execution on the webView can communicate back to the plugin.

Just rambling an API may look something like this…

PanelView.render() return html
PanelView.addCSS(css [string])
PanelView.onMessage(msgName [string], data [plain-object/string])

It could even expose the PanelView object to the js executing on the webview if that’s to complicated the a plain js object as cookie/state.

I think is far more feasible.

To be totally honest, if we went down the route of completely custom UI we’d probably more likely expose it to users with SwiftUI instead of JavaScriptCore, as it’s designed to do exactly this in secondary processes.

3 Likes

Just curious. I personally I’m not aware of a library or means to build a UI with SwiftUI at runtime. I have seen things using UIKit at runtime and doing composition with SwiftUI at runtime, but Im actually quite intrigue if you have seen something along those lines?

Or perhaps you are thinking of having new extensions compiled with XCode to build extensions with UI, that would kind of take Nova into a whole different direction when it comes to having a hackable/extensible editor.

I speculate that building a framework on top of UIKit to expose widgets to a JS extension is quite and undertaking something on the lines of a mini QT, WS-Widgets, etc.

I honestly prefer the JS/HTML approach because will allow Nova to more easily benefit from the extensive pool of JS extensions and plugins found for VSCode/Atom, etc.

And on the topic of bridging JavascriptCore and Node JS there is quite a few projects out there that could serve as templates for Nova to add better support for Node JS code. For examples in duktape & QuickJS (JS runtimes) you will find a few projects in Github that implement the scaffolding of Node-Core and then we have things like node-jsc, nodejs-mobile that are already built on top of JavascriptCore.

PS: There is a nodejs-mobile plugin for cordova. nodejs-mobile runs on a separate thread and the UI lives on a webview in the main thread which sound very similar to Nova’s use-case.

I was thinking a much simpler scope, to be honest. Less the ability to dynamically define your UI at runtime, and more along the lines of providing a JSON file which defines your UI layout which gets deserialized into native widgets at runtime, after which you can communicate with those widgets to modify their values and hide / show them as needed from your JavaScript code (or Swift code, if we ever went that route).

Putting in my vote for expanded sidebar UI capabilities.

In my opinion it needs feature parity with the other Nova sidebars, like right-aligned icons, multi-line wrapped text items, checkbox items, font options like monospace, bold, and colors.

But something that allows us to add any number of labels, buttons, dropdown buttons and input fields would be amazing and very helpful too. Sort of like the preferences UI actually.