sample app

.gitignore

@@ -3,3 +3,4 @@ packages
 pubspec.lock
 app/web/out
 .buildlog
+app/test/out

app/LICENSE

@@ -0,0 +1,2 @@
+All html and css in this directory is forked from the public domain TodoMVC
+project at https://github.com/addyosmani/todomvc/tree/master/template.

app/README.md

@@ -0,0 +1,15 @@
+TodoMVC sample application written with the Dart Web UI package, which includes
+web components and MDV templates bound to models.
+
+To run this code, launch "web/main.html". If you encounter an error about a 
+missing "web/out/main.html" file, right click on "build.dart" and select "Run".
+
+Generated code will be created under "web/out/". Any time you edit and save a 
+source file, the necessary files will be regenerated automatically. Look at
+"build.dart" to see how this works.
+
+You can also find this example on the development site for the Dart Web UI
+package:
+
+  https://github.com/dart-lang/web-ui/tree/master/example/todomvc
+

app/bin/build.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+## Buid script for start application
+
+pub install
+
+echo "Run tests..."
+dart test/test.dart
+
+echo "Build Web UI app..."
+dart build.dart
+
+echo "Compile to js..."
+dart2js --checked --minify --out=web/out/index.html_bootstrap.dart.js web/out/index.html_bootstrap.dart

app/build.dart

@@ -0,0 +1,11 @@
+#!/usr/bin/env dart
+// Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:io';
+import 'package:web_ui/component_build.dart';
+
+void main() {
+  build(new Options().arguments, ['web/index.html']);
+}

app/main.dart

@@ -1,18 +1,42 @@
 import 'dart:io';
 import 'dart:json' as JSON;
 
+final Path staticFiles = new Path("web/out");
+
 main() {
-  var port = int.parse(Platform.environment['PORT']);
+  var env = Platform.environment;  
+  var port = env['PORT'] == null ? 7000 : int.parse(env['PORT']);
   HttpServer.bind('0.0.0.0', port).then((HttpServer server) {
     print('Server started on port: ${port}');
-    server.listen((HttpRequest request) {
-      var resp = JSON.stringify({
-        'Dart on cloudbees': true,
-        'Environment': Platform.environment}
-      );
-      request.response..headers.set(HttpHeaders.CONTENT_TYPE, 'application/json')
-                      ..write(resp)
-                      ..close();
-    });
+    server.listen(_staticFileHandler,
+                  onError: (error) => print("Failed to start server: $error"));
   });
+}
+
+
+void _staticFileHandler(HttpRequest request) {
+  HttpResponse response = request.response;
+  final String file= request.uri.path == '/' ? '/index.html' : request.uri.path;
+
+  String filePath = staticFiles.append(file).canonicalize().toNativePath();
+  print(filePath);
+  if(!filePath.startsWith(staticFiles.toNativePath())){
+    _send404(request, filePath);
+  } else {
+    final File file = new File(filePath);
+    file.exists().then((bool found) {
+      if (found) {
+        print("200 - ${request.uri.path} - $filePath");
+        file.openRead().pipe(response);
+      } else {
+        _send404(request, filePath);
+      }
+    });
+  }
+}
+
+_send404(HttpRequest request, [String filePath = ""]) {
+  print("404 - ${request.uri} - $filePath");
+  request.response.statusCode = HttpStatus.NOT_FOUND;
+  request.response.close();
 }

app/pubspec.yaml

@@ -1,4 +1,8 @@
-name: sampleapp
-description: A sample web application
+name: Todo_MVC
+description: A sample Dart application with Web UI.
+homepage: https://github.com/dart-lang/web-ui/tree/master/example/todomvc
 dependencies:
-  papaya: any
+  browser: any
+  web_ui: any
+dev_dependencies:
+  unittest: any

app/test/expected/todomvc_listorder_shadowdom_test.html.txt

@@ -0,0 +1,171 @@
+Content-Type: text/plain
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x591
+  RenderBlock {HTML} at (0,0) size 800x591
+    RenderBody {BODY} at (125,130) size 550x445 [color=#4D4D4D] [bgcolor=#EAEAEA]
+      RenderBlock (anonymous) at (0,0) size 550x0
+        RenderInline {SPAN} at (0,0) size 0x0
+          RenderText {#text} at (0,0) size 0x0
+      RenderBlock (anonymous) at (0,0) size 550x445
+        RenderBlock {FOOTER} at (0,287) size 550x158 [color=#A6A6A6]
+          RenderBlock {P} at (0,0) size 550x22
+            RenderText {#text} at (135,2) size 280x18
+              text run at (135,2) width 280: "Double-click to edit a todo."
+          RenderBlock {P} at (0,38) size 550x22
+            RenderText {#text} at (160,2) size 130x18
+              text run at (160,2) width 130: "Credits: the "
+            RenderInline {A} at (0,0) size 40x18
+              RenderText {#text} at (290,2) size 40x18
+                text run at (290,2) width 40: "Dart"
+            RenderText {#text} at (330,2) size 60x18
+              text run at (330,2) width 60: " team."
+          RenderBlock {P} at (0,76) size 550x44
+            RenderText {#text} at (25,2) size 170x18
+              text run at (25,2) width 170: "Learn more about "
+            RenderInline {A} at (0,0) size 210x18
+              RenderText {#text} at (195,2) size 210x18
+                text run at (195,2) width 210: "Dart + Web Components"
+            RenderText {#text} at (405,2) size 40x18
+              text run at (405,2) width 10: " "
+              text run at (415,2) width 30: "or "
+            RenderInline {A} at (0,0) size 285x40
+              RenderText {#text} at (445,2) size 285x40
+                text run at (445,2) width 80: "view the"
+                text run at (240,24) width 60: "source"
+            RenderText {#text} at (300,24) size 10x18
+              text run at (300,24) width 10: "."
+          RenderBlock {P} at (0,136) size 550x22
+            RenderText {#text} at (195,2) size 80x18
+              text run at (195,2) width 80: "Part of "
+            RenderInline {A} at (0,0) size 70x18
+              RenderText {#text} at (275,2) size 70x18
+                text run at (275,2) width 70: "TodoMVC"
+            RenderText {#text} at (345,2) size 10x18
+              text run at (345,2) width 10: "."
+      RenderBlock (anonymous) at (0,461) size 550x0
+        RenderInline {SPAN} at (0,0) size 0x0
+        RenderText {#text} at (0,0) size 0x0
+        RenderText {#text} at (0,0) size 0x0
+layer at (125,130) size 550x222
+  RenderBlock (relative positioned) {SECTION} at (0,0) size 550x222 [bgcolor=#FFFFFFE6] [border: (1px solid #CCCCCC)]
+    RenderBlock {HEADER} at (1,1) size 548x69
+      RenderBlock {FORM} at (0,15) size 548x54
+        RenderText {#text} at (0,0) size 0x0
+layer at (166,131) size 4x220
+  RenderBlock (positioned) at (41,1) size 4x220 [border: none (1px solid #F5D6D6) none (1px solid #F5D6D6)]
+    RenderText at (0,0) size 0x0
+layer at (126,24) size 548x22
+  RenderBlock (positioned) {H1} at (1,-106) size 548x23 [color=#FFFFFF4C]
+    RenderText {#text} at (249,2) size 50x18
+      text run at (249,2) width 50: "todos"
+layer at (126,359) size 548x23 layerType: background only
+layer at (126,251) size 548x100
+  RenderBlock (positioned) zI: -1 at (0,-108) size 548x100
+    RenderText zI: -1 at (0,0) size 0x0
+layer at (126,359) size 548x23 layerType: foreground only
+  RenderBlock (positioned) zI: 1 {FOOTER} at (1,229) size 548x23 [color=#777777]
+    RenderBlock (floating) {SPAN} at (15,0) size 10x23
+      RenderInline {STRONG} at (0,0) size 10x18
+        RenderText {#text} at (0,3) size 10x18
+          text run at (0,3) width 10: "2"
+layer at (126,359) size 548x23
+  RenderBlock (positioned) {UL} at (0,0) size 548x23
+    RenderInline {LI} at (0,0) size 44x18
+      RenderText {#text} at (0,0) size 0x0
+      RenderInline {A} at (0,0) size 30x18 [color=#83756F]
+        RenderText {#text} at (170,3) size 30x18
+          text run at (170,3) width 30: "All"
+      RenderText {#text} at (202,2) size 10x18
+        text run at (202,2) width 10: " "
+    RenderText {#text} at (0,0) size 0x0
+    RenderInline {LI} at (0,0) size 74x18
+      RenderText {#text} at (0,0) size 0x0
+      RenderInline {A} at (0,0) size 60x18 [color=#83756F]
+        RenderText {#text} at (214,2) size 60x18
+          text run at (214,2) width 60: "Active"
+      RenderText {#text} at (276,2) size 10x18
+        text run at (276,2) width 10: " "
+    RenderText {#text} at (0,0) size 0x0
+    RenderInline {LI} at (0,0) size 94x18
+      RenderText {#text} at (0,0) size 0x0
+      RenderInline {A} at (0,0) size 90x18 [color=#83756F]
+        RenderText {#text} at (288,2) size 90x18
+          text run at (288,2) width 90: "Completed"
+      RenderText {#text} at (0,0) size 0x0
+    RenderText {#text} at (0,0) size 0x0
+layer at (449,359) size 210x20
+  RenderButton {BUTTON} at (323,0) size 210x20 [bgcolor=#00000019]
+    RenderBlock (anonymous) at (10,0) size 190x20
+      RenderText {#text} at (0,1) size 170x18
+        text run at (0,1) width 170: "Clear completed ("
+      RenderText {#text} at (170,1) size 10x18
+        text run at (170,1) width 10: "1"
+      RenderText {#text} at (180,1) size 10x18
+        text run at (180,1) width 10: ")"
+layer at (126,131) size 548x16
+  RenderBlock (positioned) zI: 2 at (1,1) size 548x16 [border: none (1px solid #6C615C) none]
+    RenderText zI: 2 at (0,0) size 0x0
+layer at (126,146) size 548x54
+  RenderTextControl zI: 2 {INPUT} at (0,0) size 548x54 [bgcolor=#00000005]
+layer at (186,162) size 472x22
+  RenderBlock {DIV} at (60,16) size 472x22 [color=#A9A9A9]
+    RenderText {#text} at (0,1) size 220x19
+      text run at (0,1) width 220: "What needs to be done?"
+layer at (186,162) size 472x22
+  RenderBlock {DIV} at (60,16) size 472x22
+layer at (126,200) size 548x151
+  RenderBlock (relative positioned) zI: 2 {SECTION} at (1,70) size 548x151 [border: (1px dotted #ADADAD) none]
+    RenderBlock {UL} at (0,1) size 548x150
+      RenderListItem {LI} at (0,0) size 548x50
+      RenderListItem {LI} at (0,50) size 548x50
+      RenderListItem {LI} at (0,100) size 548x50
+layer at (115,148) size 65x41
+  RenderBlock (positioned) {INPUT} at (-11,-52) size 65x41 [color=#000000]
+    RenderInline (generated) at (0,0) size 67x38 [color=#D9D9D9]
+      RenderText at (25,0) size 17x31
+        text run at (25,0) width 17: "\x{BB}"
+layer at (126,201) size 548x50
+  RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1px dotted #CCCCCC) none]
+    RenderBlock {DIV} at (0,0) size 548x49
+      RenderBlock {LABEL} at (60,15) size 150x19
+        RenderText {#text} at (0,0) size 150x18
+          text run at (0,0) width 150: "one (unchecked)"
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+layer at (126,201) size 40x49
+  RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000]
+    RenderInline (generated) at (0,0) size 18x22 [color=#D9D9D9]
+      RenderText at (11,10) size 18x22
+        text run at (11,10) width 18: "\x{2714}"
+layer at (126,251) size 548x50
+  RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1px dotted #CCCCCC) none]
+    RenderBlock {DIV} at (0,0) size 548x49
+      RenderBlock {LABEL} at (60,15) size 130x19
+        RenderText {#text} at (0,0) size 130x18
+          text run at (0,0) width 130: "two (checked)"
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+layer at (126,251) size 40x49
+  RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000]
+layer at (126,250) size 18x22
+  RenderInline (relative positioned) at (0,0) size 18x22 [color=#85ADA7]
+    RenderText at (11,10) size 18x22
+      text run at (11,10) width 18: "\x{2714}"
+layer at (126,301) size 548x50
+  RenderBlock (relative positioned) {DIV} at (0,0) size 548x50 [border: none (1px dotted #CCCCCC) none]
+    RenderBlock {DIV} at (0,0) size 548x49
+      RenderBlock {LABEL} at (60,15) size 170x19
+        RenderText {#text} at (0,0) size 170x18
+          text run at (0,0) width 170: "three (unchecked)"
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+      RenderText {#text} at (0,0) size 0x0
+layer at (126,301) size 40x49
+  RenderBlock (positioned) {INPUT} at (0,0) size 40x49 [color=#000000]
+    RenderInline (generated) at (0,0) size 18x22 [color=#D9D9D9]
+      RenderText at (11,10) size 18x22
+        text run at (11,10) width 18: "\x{2714}"
+caret: position 0 of child 0 {DIV} of {#document-fragment} of child 1 {INPUT} of child 3 {FORM} of child 1 {HEADER} of child 1 {SECTION} of {#document-fragment} of child 1 {SPAN} of body