search

lilactown / punk

A data REBL built for the web
Eclipse Public License 2.0
148 stars 5 forks source link

use in vscode extension and/or atom package? #6

Open sogaiu opened 5 years ago

sogaiu commented 5 years ago

How would one go about including Punk in an Atom package or a VS Code extension?

IIUC, both of those applications are Electron-based -- are any of the existing adapters already suited for the task?

Perhaps it is already clear, but for reference, at least some Atom packages and VS Code extensions that are written in ClojureScript use :target node-library in their corresponding shadow-cljs.edn files.

If there isn't an appropriate adapter for this, please consider this a feature request :)

P.S. I looked for a way to create this issue with an "enhancement" tag -- but IIUC, one needs write access to do so (https://help.github.com/articles/about-labels/).

lilactown commented 5 years ago

If I understand your question, you're asking how you could use Punk to help you in developing an Atom or VS Code extension?

This would depend on how these extensions get run. Are they executed in a Node.js context? Or browser context? Both?

If your code is executed in a Node.js context, punk-adapter-node might Just Work™️. It basically starts a web server in the Node.js process on port 9876 that you can see the UI (it's not very pretty right now). You might need to call punk.adapter.node/start yourself if :target :node-library doesn't support preloads.

If your code is executed in a browser context... that's more complicated. You probably don't want the Punk UI to show up inside of your editor, and I'm not sure how it's might interact with the DOM. Some experimentation is required.

So basically, if you're interested in this... could you experiment and report back? 😄

PEZ commented 5 years ago

A POC Punk VS Code extension should be quite easy to create, since those are executed in a node.js context (as are Atom packages, so I guess it is very much in reach there as well).

For VS Code I guess it would be something like requiring the Punk :node-library and from the extension's activate() function call punk.adapter.node/start, then open up a WebView for localhost:9876.

You can choose to write such an extension in ClojureScript or TypeScript or whatever, depending on what it is the POC should prove. :smile:

I am very interested in any results from such experiments, @sogaiu. It could be something to include in Calva. I know @mseddon is dreaming on hosting Punk inside the coming REPL window (which is a WebView as well), but a first step could be to include Punk as a separate WebView. Please consider joining the #calva-dev channel on the Clojurians Slack and we might be able to assist your in your explorations. (We will certainly try to help you.)

lilactown commented 5 years ago

I think there's two concerns:

  1. Using Punk to aid in developing of some Atom or VS Code extension written in CLJS
  2. Using Punk as an extension

I think both would be cool! I'm not sure which one @sogaiu intended in opening the issue.

sogaiu commented 5 years ago

Sorry for the lack of clarity.

I was hoping to employ Punk as part of an Atom package (e.g. Chlorine / Proto REPL) and/or VS Code extension (e.g. Calva). It seemed to me that all of these packages / extensions could benefit from being able to visualize evaluated results. What @PEZ described seems similar to this - and thank you for the invitation :)

I also agree with @Lokeh that it could be useful to use Punk to aid in the developing of some Atom package or VS Code extension - but this wasn't the original motivation for opening the issue.

mauricioszabo commented 5 years ago

I'm currently developing a package called Chlorine, and I too would be very glad if we could have, let's say, a "Punk Tab" on Atom, and when we evaluate a code, we could inspect the result on that "Punk Tab".

Is there any documentation on how to render the UI on a browser element (like a div, or something)? Maybe we can start from there and see what works and what not!

lilactown commented 5 years ago

There's no formal documentation yet, but the informal version is that you will place the built files found in ui/dist/ on a webpage, and then call punk.ui.core.start_BANG_.

punk.ui.core.start_BANG_ (https://github.com/Lokeh/punk/blob/master/ui/src/punk/ui/core.cljs#L467) takes a couple args:

Each of the adapter packages run this function differently depending on the context.

The adapter-web package passes in a div it inserts into the page for node, and uses core.async directly to handle messages from input / output.

Remote packages (like adapter-node) use websockets to talk to each other. https://github.com/Lokeh/punk/blob/master/ui/src/punk/ui/remote.cljs has the code for setting up the websocket connection to the server, creating the div on the page and starting the UI.

I could see one cross-platform way of integrating with an editor extension that has a REPL connection to the user's application:

  1. A middleware/some code in the extension is setup to handle passing Punk's messages to and from the UI and the user's application.

Since it has a REPL connection, it could call (punk.core/dispatch [:tap ..]), (punk.core/dispatch [:nav ...]), etc. directly.

It would need to add a new effect handler for the :emit effect in the user's application that would communicate to the middleware to pass a message to the Punk UI.

  1. The Punk UI JS/CSS code is somehow included in the editor extension
  2. The Punk UI is started with input/output wired up to interact with this middleware, and a node of a div inside Atom/VS Code
lilactown commented 5 years ago

That being said, it might be a good idea to flesh out Punk some more and clean up some bugs before we start integrating it with all of our tools; I don't want to curb any excitement, but I still think there's plenty of work to be done to make it usable in all cases before we start pushing it on others 😅