Clean Up, Add Style, Fix Split

TimWhiting / dart_pad_widget

A DartPad widget for Flutter Web

BSD 3-Clause "New" or "Revised" License

19 stars 3 forks source link

Clean Up, Add Style, Fix Split #4

Closed caseycrogers closed 3 years ago

caseycrogers commented 3 years ago

Hey! I just forked Dart Pad Widget to try to add some features (namely, I want to be able to produce an Iframe with JUST the rendered UI, no editor). As a precursor to that, I did some cleanup on the existing functionality. If you like the changes, please accept them! Otherwise I'll just keep working in my own fork.

Changes:

Clean up the iframe URL generation using constants and the URI package
Add a style to the iframe to set it's height and width
Fix the split param-dart pad widget was providing a bool when it's supposed to be an int
add pubspec.lock to .gitingore (this should always be locally generated, so no need to commit it)

TimWhiting commented 3 years ago

Thanks for the contribution!

TimWhiting commented 3 years ago

Merged and published

caseycrogers commented 3 years ago

@TimWhiting I'm curious if you have any thoughts on how to achieve this.

I wanted to parse the HTML in the iFrame to extract the UI output element only-but that constitutes cross site scripting so it's not allowed by the browser.

I could file an issue and/or create a PR against dartpad to support a "UI only" embedding type.

CURLing https://dartpad.dev/embed-flutter.html?null_safety=true retrieves raw HTML, so I could parse out just the UI display element from there.

Finally, I could display a regular embedded editor but cropped down to just the UI component.

TimWhiting commented 3 years ago

Sounds like just fetching the plain HTML https://dartpad.dev/embed-flutter.html?null_safety=true and parsing out the UI element would be the easiest and most performant removing the need for an iframe, but subject to changes to dart-pad's html structure. If you get it working feel free to contribute another pull request and we can keep it up to date here. Cropping the editor is probably not the most performant, and might cause other issues related to platform views.

Given more time I would like to create a native flutter dart-pad. The code is open-source and written in dart, it mainly just needs UI changes from plain html and js dart-interop to flutter UI, and finding a good syntax highlighting package. In the past flutter didn't have the best support for rich text editing, but now with packages like SuperEditor it seems more doable.

caseycrogers commented 3 years ago

Unfortunately it looks like the output UI is itself another iframe so I can't pull out raw HTML from the CURL.

Yeah a native dartpad sounds really nice-do you know if there's already a way to run dart to js in native dart? I haven't looked too deep into it, but I haven't yet found a way to reference dart-services natively from dart code instead of having to go through the CLI.

TimWhiting commented 3 years ago

There are instructions for how to compile and run dart-pad locally here: https://github.com/dart-lang/dart-pad/blob/master/CONTRIBUTING.md if that is what you are asking. I believe the way dartpad works is by running a server that runs dart2js on files with the frontend sends dart files to the server and the server sends a response with the compiled js code. It doesn't seem like you would be able to do it in a javascript environment because the dart-services probably deals with io files and won't run on web.

TimWhiting commented 3 years ago

Looks like there is a PR for an only UI embedding mode for dart-pad: https://github.com/dart-lang/dart-pad/pull/1919