chore(analytics): Build hello_world, check constraints

Create gulp targets to build `hello_world` and check its gzipped size against size constraints. See #5312, #5314
2015-11-19 16:08:23 -08:00
parent 225b9d306b
commit 31f85f0297
7 changed files with 197 additions and 24 deletions
--- a/modules_dart/payload/hello_world/pubspec.yaml
+++ b/modules_dart/payload/hello_world/pubspec.yaml
@ -0,0 +1,24 @@
+name: hello_world
+environment:
+  sdk: '>=1.10.0 <2.0.0'
+dependencies:
+  observe: '^0.13.1'
+  angular2: any
+  browser: '^0.10.0'
+dependency_overrides:
+  angular2:
+    path: ../../../dist/dart/angular2
+transformers:
+- angular2:
+    platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
+    entry_points:
+        - web/index.dart
+
+- $dart2js:
+    minify: true
+    commandLineOptions:
+    - --show-package-warnings
+    - --trust-type-annotations
+    - --trust-primitives
+    # Uncomment to generate summaries from dart2js
+    # - --dump-info
--- a/modules_dart/payload/hello_world/web/index.dart
+++ b/modules_dart/payload/hello_world/web/index.dart
@ -0,0 +1,68 @@
+library hello_world.index;
+
+import "package:angular2/bootstrap.dart" show bootstrap;
+import "package:angular2/core.dart"
+    show ElementRef, Component, Directive, Injectable;
+import "package:angular2/render.dart" show Renderer;
+
+main() {
+  // Bootstrapping only requires specifying a root component.
+
+  // The boundary between the Angular application and the rest of the page is
+
+  // the shadowDom of this root component.
+
+  // The selector of the component passed in is used to find where to insert the
+
+  // application.
+
+  // You can use the light dom of the <hello-app> tag as temporary content (for
+
+  // example 'Loading...') before the application is ready.
+  bootstrap(HelloCmp);
+}
+
+// A service available to the Injector, used by the HelloCmp component.
+@Injectable()
+class GreetingService {
+  String greeting = "hello";
+}
+// Directives are light-weight. They don't allow new
+
+// expression contexts (use @Component for those needs).
+@Directive(selector: "[red]")
+class RedDec {
+  // ElementRef is always injectable and it wraps the element on which the
+
+  // directive was found by the compiler.
+  RedDec(ElementRef el, Renderer renderer) {
+    renderer.setElementStyle(el, "color", "red");
+  }
+}
+// Angular 2.0 supports 2 basic types of directives:
+
+// - Component - the basic building blocks of Angular 2.0 apps. Backed by
+
+//   ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
+
+// - Directive - add behavior to existing elements.
+
+// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
+
+// 2.0 component.
+@Component(
+    selector: "hello-app",
+    viewProviders: const [GreetingService],
+    template:
+        '''<div class="greeting">{{greeting}} <span red>world</span>!</div>
+           <button class="changeButton" (click)="changeGreeting()">change greeting</button>''',
+    directives: const [RedDec])
+class HelloCmp {
+  String greeting;
+  HelloCmp(GreetingService service) {
+    this.greeting = service.greeting;
+  }
+  void changeGreeting() {
+    this.greeting = "howdy";
+  }
+}
--- a/modules_dart/payload/hello_world/web/index.html
+++ b/modules_dart/payload/hello_world/web/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <title>Hello Angular 2.0</title>
+<body>
+  <hello-app>
+    Loading...
+  </hello-app>
+
+  <script src="index.dart" type="application/dart"></script>
+<script src="packages/browser/dart.js" type="text/javascript"></script>
+</body>
+</html>