Integrating Stylus to external text editors

[schomery]

So I am working on a new extension that brings the power of external editing to Stylus. We can integrate it directly to Stylus when the project is usable.

For now here is the summary:

1. We have a multiple platform compatible native integration; https://github.com/openstyles/native-client. This project is forked from https://github.com/andy-portmen/native-client. I have modified the source code so we can now write native NodeJS code inside our extension code. The native client can be installed in Windows, Mac, and Linux for now. I've tried the Mac version, not the rest! We have automated OS specific installers here; https://github.com/openstyles/native-client/releases. The project is automatically compiled here https://travis-ci.org/openstyles/native-client
2. There is a simple extension to demonstrate how native integration works. https://github.com/openstyles/sample-native-extension. Basically, we can compile a NodeJS code in the extension side like https://github.com/openstyles/sample-native-extension/blob/master/background.js#L18-L20. Note that all required modules need permission before they are functional; https://github.com/openstyles/sample-native-extension/blob/master/background.js#L16. The native client only understands two commands:
   • {method: 'spec'}
   • {permissions:[], script: "/*NodeJS script here*/"}
3. The actual external editor integration is in https://github.com/openstyles/stylus-external-editor. For now, it performs the following actions when called.
   • creates a temporary file in the OS level temporary directory
   • Opens the temporary file in Sublime Text (this part is written to work for Mac OS for now)
   • Watches file changes and prints the entire file in the console when a change is registered.

---

Notes:

1. Since the "stylus-external-editor" extension has no id, you need to modify https://github.com/openstyles/native-client/blob/master/config.js with the correct extension id before running the installer.

[tophf]

Is it possible to provide support for the use case in #86 e.g. the ability to open&watch an arbitrary existing file?

[schomery]

We have it now on https://github.com/openstyles/stylus-external-editor/commit/9057f6054ce35ddbe0796adf498c659a43950348

It is now possible to call observeFile to only observe an existing file or call openTmpFile to create a new tmp file and observe its changes.

[schomery]

https://github.com/openstyles/stylus-external-editor is fixed for Windows; https://github.com/openstyles/stylus-external-editor/commit/fdaa75bc7b7ca0aec80084d5fee40041e9b0b827

[silverwind]

Wow, this sounds too good to be true. What interface is used between the extension and node?

[schomery]

Here is the summary on how the stylus-external-editor extension can be tested on Chrome/Opera:

1. Download https://github.com/openstyles/stylus-external-editor/archive/master.zip and extract it in a local directory
2. Download the latest version of our native client https://github.com/openstyles/native-client/releases
3. Open chrome://extensions, turn the developer mode on and install stylus-external-editor.
4. Replace or add id in step 3 to https://github.com/openstyles/native-client/blob/master/config.js
5. Run install.sh or install.bat
6. Restart stylus-external-editor from chrome://extensions

You should get an empty style file in your default text editor (Mac and Windows are tested). Whenever a change is made, you will get a notification in the background console of stylus-external-editor

[schomery]

What interface is used between the extension and node

hmmm, nothing! See https://github.com/openstyles/native-client/blob/master/host.js#L61-L66

[schomery]

Here is the summary on how the stylus-external-editor extension can be tested on Firefox:

1. Download https://github.com/openstyles/stylus-external-editor/archive/master.zip and extract it in a local directory
2. Download the latest version of our native client https://github.com/openstyles/native-client/releases
3. Open about:debugging, turn "Enable add-on debugging" on and install stylus-external-editor.
4. Open about:support and find stylus-external-editor GUID.
5. Replace or add id in step 4 to https://github.com/openstyles/native-client/blob/master/config.js
6. Run install.sh or install.bat
7. Restart stylus-external-editor from about:debugging

You should get an empty style file in your default text editor (Mac and Windows are tested). Whenever a change is made, you will get a notification in the background console of stylus-external-editor

[Mottie]

I got this working, and I see it has potential to be awesome!

Would you still implement this method if @tambry's C++ solution in #86 works out?

[schomery]

Would you still implement this method if @tambry's C++ solution in #86 works out?

I don't mind if we go with the C++ version. I personally like how the entire native side is written in our extension side for NodeJS version. Anyway, if the C++ works as expected and can be compiled for all major operation systems, we can drop the NodeJS client.

[ghost]

@tambry I thought this was supposed to be a small C application? When did it turn into bloatware holding not 1 but 2 Node EXEs?

http://github.com/andy-portmen/native-client/releases

[tambry]

@svnpenn I didn't implement that. I would never implement such a bloated solution. I'm unable to implement my solution yet, as I'm waiting on this Chromium issue (Firefox equivalent). You can try staring the Chromium issue. The issue has been assigned for Chromium 62, which will release on 17th October. Only one more month of waiting!