lahmatiy/component-inspector

Alternative for basisjs-tools to open file in editor feature

vslinko opened this issue · 13 comments

Ok, now I can see locations of my files, due to #3

Next step is open file in editor.
As I understand your basis server injects some API to the page.
I can't use basis server, but I want to use express middleware.
Could you tell me more about that API?

Yes, all is correct. Now it's hardcoded to work with basis.js dev-server. I think how to make this feature more universal. But it's need some time to implement.
I'd got a feedback about express middleware just 2 days ago. So I planning to implement it ASAP.
But first of all I want to do universal API for inspector. That API will provide ability to describe any specific of your tool chain and simplify integration to other frameworks and libraries.
I planning finish it next few days. So, stay tuned.

I have some questions about express. Do you use any dev web socket connection while developing? May be you know any middlewares that provide this functionality and could be extended? Or maybe you know some good examples of html injection middlewares (extensible one would be perfect)?
As I think about this problem, probably we don't need for socket connection here at all. But some kind of html injection would be helpfull.

Yes, I'm using web socket, but that socket owned by webpack-dev-server and used for hot module replacement, so I haven't control on it.
I think that best way to receive actions from client, in this case, is intercept ajax calls to specific route, like /_component_inspector/.

For html injection you can use any library you want, even regexps.
But, as I know, you can't simply modify response body in middleware because response body is not just plain text. For example, response body could be a data stream piped to response. Best example of response modification middleware is https://github.com/expressjs/compression

But why you need code injection? Why don't make runtime a simple library that I can install using npm?

I think that best way to receive actions from client, in this case, is intercept ajax calls to specific route, like /_component_inspector/.

Yep, it was my idea when I said that "we don't need for socket connection".

But why you need code injection?

It's may be useful to setup functionality. But probably we could do this by other tools, for example by webpack + DefinePlugin. However some basic alternative needed out of the box.

And one more question: what editor do you use?
"Open in editor" works best with Sublime. Atom is fine. A little bit harder but still possible do it for WebStorm. But I didn't try others editors...
All we need by editor is support to open file on certain position by cli command. If it's supported no problem then.

Right now I'm using atom. Sometimes I'm using emacs, vim, c9.

It's may be useful to setup functionality.

I think runtime could download configurations from /_component_inspector/.

That's the problem: we need to know url to download configuration from (and I believe you'll be upset about extra xhr request on page load).
All we need (configuration) is url to send command to server to open file. But don't worry about it. I guess I have some ideas.

BOOM! It's done :)

Now you can define global variable OPEN_FILE_URL to define url for opening file. If this variable is defined – inspector decides that feature is supported.

You could use express-open-in-editor extension that provides necessary functionality.

I think that the variable name should have a prefix, because in future I can forget about how that variable related to my code. What are you think?
INSPECTOR_OPEN_FILE_URL for example.

I'm not sure about this. Don't think you would have something else related to those functionality. And you can annotate setting right. As can also define it through webpack.DefinePlugin or something like this.

But actually it doesn't matter. As I'm planing make an universal API for inspector. So Backbone/React version will be something like a preset. So you'll be able to alter those or implement entirely your own solution for various parts of solution.

Btw, did you try express extension? Does it work fine and fit your requirements?

I'll try in next few days.

Yes, it works! Thank you.