Removing link to Dart file kills app

Question

I am trying to run my Dart app in Firefox (v22.0). Here is the app's homepage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My 1st Dart App</title>
        <link rel="stylesheet" href="assets/myapp/myapp/myapp.css">
    </head>
    <body>
        <h2>Push the button!</h2>

        <div id="sample_container_id">
            <input type="button" id="someButton" value="Some Button!" />
        </div>

        <script type="application/dart" src="myapp.dart"></script>
        <script src="packages/browser/dart.js"></script>
    </body>
</html>

When I run this as-is, my app runs fine and does exactly what I want it to. But then if I strip out the first <script/> tag (<script type="application/dart" src="myapp.dart"></script>), none of the Dart code executes at runtime. For instance, I have a click handler configured on an HTML button like so:

void main() {
    querySelector("#someButton").onClick.listen((e) => window.alert("Hello!"));
}

If I remove the first <script/> tag, then when I click someButton nothing happens.

(1) Why does removing the first <script/> tag "kill" the Dart code? I am using pub build to produce cross-compiled JavaScript, so why should Firefox care about my Dart source file (since FF 22.0 doesn't support Dart natively)?

(2) Does Dart have a recommended <DOCTYPE> declaration, such as transitional, etc.?

score 4 · Answer 1 · answered Dec 23 '13 at 15:58

4

Short answer: Look into dart.js to find out what's going on.

Long answer: Dart.js will look for the script: application/dart, if it's running on a browser with DartVM (i.e.: Dartium) it will launch that. Otherwise it will take the script file myapp.dart and change the file to be myapp.dart.js and run that. By removing that script tag, you are removing your dart script which dart.js looks for and as a result your javascript compiled version is never inserted into your document.

Regarding DOCTYPE none is particularly recommended, however since Dart is generally designed for the latest versions of browser and in fact uses HTML5 tags where appropriate it would probably be best to use the HTML5 DOCTYPE as you have in your example.

answered Dec 23 '13 at 15:58

Matt B

6,192
1
20
27

Thanks @Matt B (+1) - please see my follow-up question underneath Gunter's answer - I have the same question for you! – IAmYourFaja Dec 23 '13 at 16:05
As per Günter's response, it is normal that, at this time the .dart version of your app is not copied to build. Eventually it will be but for the time being you have to live with the 404 error. Alternatively you can copy your original sources into the build directory or run dart2dart (dart2js --output-type=dart) manually to create the minified version of your dart scripts. You cannot remove the application/dart script line (even from the built version of index.html) as dart.js expects this there. See: http://dartbug.com/15623 – Matt B Dec 23 '13 at 16:52

score 3 · Answer 2 · answered Dec 23 '13 at 15:59

3

1) Take a look at what packages/browser/dart.js does.

It first checks if the browser supports Dart, then if the browser does not support Dart, it looks for files with type application/dart and remaps them to point to the correct JavaScript file.

Since you removed your Dart script, dart.js doesn't find it and never remaps it to point to the JavaScript file.

2) Everything I've seen uses the HTML5 doctype: <!DOCTYPE html> but I don't think there is an official guideline.

answered Dec 23 '13 at 15:59

Pixel Elephant

20,649
9
66
83

Thanks @Pixel Elephant (+1) - please see my follow-up question underneath Gunter's answer - I have the same question for you! – IAmYourFaja Dec 23 '13 at 16:04

score 2 · Answer 3 · answered Dec 23 '13 at 15:56

2

packages/browser/dart.js checks if the DartVM is available, if not it replaces <script type="application/dart" src="xxx.dart"></script> with <script src="xxx.dart.js"></script>. Assuming you have run dart2js you can do that job manually by replacing the 2 script tags with only <script src="myapp.dart.js"></script>
there's no recommandation.

answered Dec 23 '13 at 15:56

Alexandre Ardhuin

71,959
15
151
132

Thanks @Alexandre Ardhuin (+1) - please see my follow-up question underneath Gunter's answer - I have the same question for you! – IAmYourFaja Dec 23 '13 at 16:04

score 1 · Accepted Answer · answered Dec 23 '13 at 15:58

1

1) Firefox doesn't care about the Dart source file but pub build does. If your HTML file doesn't contain a Dart script pub build can copy the file without any processing otherwise pub build adds JavaScript code that executes instead of the Dart script when the browser doesn't support Dart.

2) Your doctype is the correct HTML5 doctype and Dart works fine with it.

answered Dec 23 '13 at 15:58

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks @Gunter Zochbauer (+1) - the only thing is that if I leave the first `` tag reference in, then Firebug is throwing a 404 error as it can't find the Dart file. Sure enough, when I look in the `build/` directory that was produced from running `pub build`, there is the cross-compiled `myapp.dart.js` file, but not the original `myapp.dart` file. **Is this normal behaviour? How can I suppress the Firebug error?** Thanks again! – IAmYourFaja Dec 23 '13 at 16:04
1

The latest info I got about this is, that dart2dart is not yet finished and because there are no real browsers out in the wild that support Dart the generation of Dart code is currently disabled in pub build. This seems weird but pub build will optimize Dart code for deployment like tree-shaking, minification, concatenation, ... When dart2dart will be enabled a Dart capable browser will load the Dart script files while other browsers ignore the Dart script tags. – Günter Zöchbauer Dec 23 '13 at 16:07
Thanks again @Gunter Zochbauer (+1) - so is it safe to say that for now I just need to live with the Firebug error? In other words: can you confirm that I'm not doing anything wrong, and that there is no way I can suppress/ignore the Firebug error? Thanks again! – IAmYourFaja Dec 23 '13 at 16:21
Yes it is intentional. It builds on the fact that browsers usually ignore what they don't understand. You can remove the Dart script tag in the index.html that is generated by `pub build` in the build dir though if you don't like the error. When you want to support Dart and JS (when it's supported) you will have to live with the error. – Günter Zöchbauer Dec 23 '13 at 16:25

Removing link to Dart file kills app

4 Answers4