Strip the index.html file

Sfshaza commented 9 years ago

The examples for the dart tutorial contain the entire html file that would be used in an IDE. But these are being used on Webstorm. Please strip out the boilerplate HTML - anything outside of the tags (including the tags).

kwalrath commented 9 years ago

DartPad does some of the work for us, but it'd still be good to make DartPad-bound gists simpler and hide the <script> tags.

For example, take this gist:

https://gist.github.com/kwalrath/cfeea02a02048cead535

Here's what index.html currently has:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web_app</title>
  </head>

  <body>   
    <div id="registration"></div>
    <script type="application/dart" src="main.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Here's what DartPad needs:

<div id="registration"></div>

If you look at it in DartPad, DartPad hides everything outside of the <body>:

<div id="registration"></div>
    <script type="application/dart" src="main.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>

But it doesn't hide the scripts.

It'd be nice to strip out the <script> tags, as well as everything outside of the <body> element.

We should somehow delete the comment, too, since it doesn't make sense without the <script> tag. We should perhaps do this ourselves in the github repo, unless you want to make a special rule for this particular comment or for comments directly above <script> tags.

kasperpeulen commented 9 years ago

Personally I like it if I can also clone the dartpad/gist gist to my editor, and debug the dartpad in webstorm: https://www.youtube.com/watch?v=AwUxnp5gv2g

When dartpad generates gist, it put the script tags in the head: https://gist.github.com/anonymous/51ead8c0383d39a2f0bc

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web_app</title>
    <script type="application/dart" src="main.dart"></script>
  </head>

  <body>
    <div id="registration"></div>
  </body>
</html>

I think DartPad should be improved to put the sript tags at the end of the body. And also hide the script tags at the end of body ? Thoughts @Sfshaza @kwalrath ?

kwalrath commented 9 years ago

Yes, DartPad's generated code could probably be better (cc @Georgehe4, @devoncarew).

I suppose that I don't really care what the gists look like, as long as DartPad shows the minimum amount of code necessary.

It's important to me that the repo (e.g. dart-tutorial-samples repo) be the source of truth for all related samples, whether or not they're gistable/dartpadable. Downloading the repo should give you something you can execute (with or without an IDE) without modifications.

It's also important for people to be able to export from DartPad.

I'm not so concerned about whether they can run code from a gist, without the intermediary of DartPad. But I can see how you'd have a different opinion, based on your use case.

If we can get DartPad to hide the scripts, then maybe that's all we really need?

kasperpeulen commented 9 years ago

If we can get DartPad to hide the scripts, then maybe that's all we really need?

That seems to me as the best solution.

devoncarew commented 9 years ago

Currently dartpad generates full html files, but when we read them in we just extract out the body contents. Is the request to move the script tag from the head section into the body section, but to not display that script tag when the user is editing the html?

The script tag is currently in the head section to make it relatively error free to extract out and re-insert the code that user has typed into the body section. There are cases where the user types explicit script tags into the body section, in order to reference JS hosted on other pages or write in-line JS. If we moved the main dart script into the body section, we'd have to be very careful when extracting user text from there.

What is the main issue with having the script in the head section?

kwalrath commented 9 years ago

It used to be that we recommended <script> tags at the bottom of the body for performance reasons. Now that we're not aiming for native Dart in the browser, maybe <script> tags in the head section are fine?

kasperpeulen commented 9 years ago

closing this, as putting the script tags in the head may be now the ideal solution for dart projects ?

kwalrath commented 9 years ago

Yep, and we've updated stagehand and the tutorial samples to put script tags in the head.

kasperpeulen / gist-generator

Strip the index.html file #4