jamesblasco / flutter_preview

Flutter | Because a widget-driven development requires a widget-driven preview.
MIT License
254 stars 24 forks source link

Emacs support with lsp-dart #10

Open ericdallo opened 3 years ago

ericdallo commented 3 years ago

Hi, congratulations for the project, its a really cool Flutter tool.

I'd like to know how to integrate this project with Emacs lsp-dart and if it's possible. I'm the maintainer of lsp-dart and would like to help with this if possible :)

Thank you!

jamesblasco commented 3 years ago

I am not familiar with Emacs, but I can explain you the keys on how I implemented it on vscode , and probably will be the same for Android Studio. Probably will be very similar.

Vscode extensions allows you to define ‘commands’, that are callbacks the can be called by the user via different inputs(eg a button).

When a dev tap de Flutter Preview button it runs a spawn child process in node.js.

flutter pub run preview:run

It passes data in between via stdin/stdout with rpc-json format.

The dart process sends back a rpc notification with the port used by the daemon.

And I start a debug session with the Flutter extension (I could implement this in the dart process in the future, but it is very well implemented with vscode) where I pass the port with a —dart-define argument.

The Vscode extension detects when the active file is saved or the active tab changes and sends the file to the spawn process. This one regenerates the code and respond requesting hot reload.

The future features I could add will work the same, the idle communicates with the daemon processs via stdin/stdout. And the daemon process comunicates with the Flutter preview app via http rest and websockets.

Example of data communication

Hope it helps for getting a general idea. If you are interested in implementing I would be happy to help you in the things I can, also very open to any feedback you might have

ericdallo commented 3 years ago

Oh, I didn't realize it has a pub package that does the magic. I'm familiar with flutter debugging process as I needed to implement flutter daemon support on lsp-dart to debug flutter and open devtools, thanks for the explanation :)

After Emacs spawn the process running flutter pub run preview, what json should I send to the process? Is there any documented protocol like flutter daemon, it would really help understands it. Anyway, thanks for the help!

ericdallo commented 3 years ago

I see that you await for the preview.launch notification then starts a custom dart debug process. So, I just need to spawn the pub package process then await for the notification then start the dart process pointing to your package port? It seems a clever idea

jamesblasco commented 3 years ago

I am still thinking on how the process should be, so it is not documented yet. But you got it!

It waits for that notification and then launches the debug process, yeah.

Later it sends a method when the active file changes. And calls hot reload after the responde https://github.com/jamesblasco/flutter_preview/blob/cae2efdf06dd5996072bba0b36157974c4000740/vscode-extension/src/preview.ts#L157.

jamesblasco commented 3 years ago

The dart process generates the main.preview.dart, that becomes the entry point of the flutter app for preview.

This file regenerates everytime an active file is changed. It only have the preview package and the active file as import and adds the Previewers defined in that file.

I like this method as you can see the preview of a file even if in another part of the app there is a compile error.

ericdallo commented 3 years ago

I see, so when you spawn the debug process you don't need an emulator/device for that?

jamesblasco commented 3 years ago

What do you mean the debug process?. The dart daemon process doesn’t need an emulator. The app needs an emulator or running it on desktop/web

ericdallo commented 3 years ago

Yeah, that was what I was talking about, I thought that the preview process would need an emulator or something like that, but it just needs the package processes to be able to present that, thank you for the explanation, I'll try to start implementing that on lsp-dart, any doubts I ask you :)