Question
I am trying to run my Dart app in Firefox (v22.0). Here is the app's homepage:
https://stackoverflow.com/questions/20746818
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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.?
Solution 4
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.
OTHER TIPS
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.
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.
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>