From 202988f8913398321e21778b8d084fd774064739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ad=C3=A3o=20J=C3=BAnior?= <itsjunnior@gmail.com>
Date: Thu, 14 Jan 2016 16:23:29 -0200
Subject: [PATCH 1/4] docs(guide): add dart version of structural directives

---
 .../dart/lib/heavy_loader_component.dart      |  37 ++++++
 .../lib/structural-directives.component.html  | 109 ++++++++++++++++++
 .../lib/structural_directives_component.dart  |  21 ++++
 .../lib/structural_directives_component.html  | 109 ++++++++++++++++++
 .../dart/lib/unless_directive.dart            |  32 +++++
 .../structural-directives/dart/pubspec.yaml   |  14 +++
 .../structural-directives/dart/web/index.html |  15 +++
 .../structural-directives/dart/web/main.dart  |   7 ++
 8 files changed, 344 insertions(+)
 create mode 100644 public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
 create mode 100644 public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html
 create mode 100644 public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
 create mode 100644 public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html
 create mode 100644 public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
 create mode 100644 public/docs/_examples/structural-directives/dart/pubspec.yaml
 create mode 100644 public/docs/_examples/structural-directives/dart/web/index.html
 create mode 100644 public/docs/_examples/structural-directives/dart/web/main.dart

diff --git a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
new file mode 100644
index 0000000000..71ef377fee
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
@@ -0,0 +1,37 @@
+// #docregion
+import 'package:angular2/angular2.dart';
+import 'dart:async';
+
+int nextId = 1;
+
+@Component(
+    selector: 'heavy-loader',
+    template: '<span>heavy loader #{{id}} on duty!</span>')
+class HeavyLoaderComponent implements OnInit, OnDestroy {
+  int id = nextId++;
+  @Input() List<String> logs;
+
+  ngOnInit() {
+    // Mock todo: get 10,000 rows of data from the server
+    _log(
+        "heavy-loader ${id} initialized, loading 10,000 rows of data from the server");
+  }
+
+  ngOnDestroy() {
+    // Mock todo: clean-up
+    _log("heavy-loader ${id} destroyed, cleaning up");
+  }
+
+  _log(String msg) {
+    logs.add(msg);
+    _tick();
+  }
+
+  /// Triggers the next round of Angular change detection
+  /// after one turn of the JavaScript cycle
+  /// ensuring display of msg added in onDestroy
+  _tick() {
+    new Future(() {});
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html b/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html
new file mode 100644
index 0000000000..f283a8677f
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html
@@ -0,0 +1,109 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>Structural Directives</h1>
+
+<!-- #docregion structural-directives -->
+<!-- #docregion asterisk -->
+<div *ngIf="hero != null">{{hero}}</div>
+<div *ngFor="#hero of heroes">{{hero}}</div>
+<!-- #enddocregion asterisk -->
+<!-- #docregion ngSwitch -->
+<div [ngSwitch]="status">
+    <template [ngSwitchWhen]="'in-mission'">In Mission</template>
+    <template [ngSwitchWhen]="'ready'">Ready</template>
+    <template ngSwitchDefault>Unknown</template>
+</div>
+<!-- #enddocregion ngSwitch -->
+<!-- #enddocregion structural-directives -->
+
+<hr>
+
+<button
+        (click)="condition = !condition"
+        [style.background] = "condition ? 'orangered': 'lightgreen'"
+>
+    Set 'condition' to {{condition ? 'False': 'True'}}
+</button>
+
+<!-- #docregion ngIf -->
+<p *ngIf="condition">
+    condition is true and ngIf is true.
+</p>
+<p *ngIf="!condition">
+    condition is false and ngIf is false.
+</p>
+<!-- #enddocregion ngIf -->
+<!-- #docregion myUnless-->
+<p *myUnless="condition">
+    condition is false and myUnless is true.
+</p>
+
+<p *myUnless="!condition">
+    condition is true and myUnless is false.
+</p>
+<!-- #enddocregion myUnless-->
+
+<hr>
+
+<!-- #docregion message-log -->
+<div><!-- Visibility -->
+    <button (click)="isVisible = !isVisible">show | hide</button>
+    <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
+</div>
+
+<div><!-- NgIf -->
+    <button (click)="condition = !condition">if | !if</button>
+    <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
+</div>
+
+<h4>heavy-loader log:</h4>
+<div *ngFor="#message of logs">{{message}}</div>
+<!-- #enddocregion message-log -->
+
+<hr>
+
+<!-- #docregion template-tag -->
+<p>
+    Hip!
+</p>
+<template>
+    <p>
+        Hip!
+    </p>
+</template>
+<p>
+    Hooray!
+</p>
+<!-- #enddocregion template-tag -->
+
+<hr>
+
+<!-- #docregion ngIf-template -->
+<!-- Examples (A) and (B) are the same -->
+<!-- (A) *ngIf paragraph -->
+<p *ngIf="condition">
+    Our heroes are true!
+</p>
+
+<!-- (B) [ngIf] with template -->
+<template [ngIf]="condition">
+    <p>
+        Our heroes are true!
+    </p>
+</template>
+<!-- #enddocregion ngIf-template -->
+
+<hr>
+
+<!-- #docregion ngFor-template -->
+<!-- Examples (A) and (B) are the same -->
+
+<!-- (A) *ngFor div -->
+<div *ngFor="#hero of heroes">{{ hero }}</div>
+
+<!-- (B) ngFor with template -->
+<template ngFor #hero [ngForOf]="heroes">
+    <div>{{ hero }}</div>
+</template>
+<!-- #enddocregion ngFor-template -->
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
new file mode 100644
index 0000000000..aafc3d73d2
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion
+import 'package:angular2/angular2.dart';
+import 'package:structural_directives/unless_directive.dart';
+import 'package:structural_directives/heavy_loader_component.dart';
+
+@Component(
+    selector: 'structural-directives',
+    templateUrl: 'structural_directives_component.html',
+    styles: const ['button { min-width: 100px; }'],
+    directives: const [UnlessDirective, HeavyLoaderComponent])
+class StructuralDirectivesComponent {
+  List<String> heroes = ['Mr. Nice', 'Narco', 'Bombasto'];
+  bool condition = true;
+  bool isVisible = true;
+  List<String> logs = [];
+  String status = 'ready';
+
+  get hero => heroes[0];
+}
+//#enddocregion
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html
new file mode 100644
index 0000000000..529803f379
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.html
@@ -0,0 +1,109 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<h1>Structural Directives</h1>
+
+<!-- #docregion structural-directives -->
+<!-- #docregion asterisk -->
+<div *ngIf="hero != null">{{hero}}</div>
+<div *ngFor="#hero of heroes">{{hero}}</div>
+<!-- #enddocregion asterisk -->
+<!-- #docregion ngSwitch -->
+<div [ngSwitch]="status">
+  <template [ngSwitchWhen]="'in-mission'">In Mission</template>
+  <template [ngSwitchWhen]="'ready'">Ready</template>
+  <template ngSwitchDefault>Unknown</template>
+</div>
+<!-- #enddocregion ngSwitch -->
+<!-- #enddocregion structural-directives -->
+
+<hr>
+
+<button
+    (click)="condition = !condition"
+    [style.background] = "condition ? 'orangered': 'lightgreen'"
+>
+  Set 'condition' to {{condition ? 'False': 'True'}}
+</button>
+
+<!-- #docregion ngIf -->
+<p *ngIf="condition">
+  condition is true and ngIf is true.
+</p>
+<p *ngIf="!condition">
+  condition is false and ngIf is false.
+</p>
+<!-- #enddocregion ngIf -->
+<!-- #docregion myUnless-->
+<p *myUnless="condition">
+  condition is false and myUnless is true.
+</p>
+
+<p *myUnless="!condition">
+  condition is true and myUnless is false.
+</p>
+<!-- #enddocregion myUnless-->
+
+<hr>
+
+<!-- #docregion message-log -->
+<div><!-- Visibility -->
+  <button (click)="isVisible = !isVisible">show | hide</button>
+  <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
+</div>
+
+<div><!-- NgIf -->
+  <button (click)="condition = !condition">if | !if</button>
+  <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
+</div>
+
+<h4>heavy-loader log:</h4>
+<div *ngFor="#message of logs">{{message}}</div>
+<!-- #enddocregion message-log -->
+
+<hr>
+
+<!-- #docregion template-tag -->
+<p>
+  Hip!
+</p>
+<template>
+  <p>
+    Hip!
+  </p>
+</template>
+<p>
+  Hooray!
+</p>
+<!-- #enddocregion template-tag -->
+
+<hr>
+
+<!-- #docregion ngIf-template -->
+<!-- Examples (A) and (B) are the same -->
+<!-- (A) *ngIf paragraph -->
+<p *ngIf="condition">
+  Our heroes are true!
+</p>
+
+<!-- (B) [ngIf] with template -->
+<template [ngIf]="condition">
+  <p>
+    Our heroes are true!
+  </p>
+</template>
+<!-- #enddocregion ngIf-template -->
+
+<hr>
+
+<!-- #docregion ngFor-template -->
+<!-- Examples (A) and (B) are the same -->
+
+<!-- (A) *ngFor div -->
+<div *ngFor="#hero of heroes">{{ hero }}</div>
+
+<!-- (B) ngFor with template -->
+<template ngFor #hero [ngForOf]="heroes">
+  <div>{{ hero }}</div>
+</template>
+<!-- #enddocregion ngFor-template -->
+<!-- #enddocregion -->
diff --git a/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart b/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
new file mode 100644
index 0000000000..9f62f93085
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/lib/unless_directive.dart
@@ -0,0 +1,32 @@
+// #docplaster
+// #docregion
+// #docregion unless-declaration
+import 'package:angular2/angular2.dart';
+// #enddocregion unless-declaration
+
+// #docregion unless-declaration
+@Directive(selector: '[myUnless]')
+class UnlessDirective {
+  // #enddocregion unless-declaration
+
+  // #docregion unless-constructor
+  TemplateRef _templateRef;
+  ViewContainerRef _viewContainer;
+
+  UnlessDirective(this._templateRef, this._viewContainer);
+  // #enddocregion unless-constructor
+
+  // #docregion unless-set
+  @Input()
+  set myUnless(bool condition) {
+    if (!condition) {
+      _viewContainer.createEmbeddedView(_templateRef);
+    } else {
+      _viewContainer.clear();
+    }
+  }
+  // #enddocregion unless-set
+  // #docregion unless-declaration
+}
+// #enddocregion unless-declaration
+// #enddocregion
diff --git a/public/docs/_examples/structural-directives/dart/pubspec.yaml b/public/docs/_examples/structural-directives/dart/pubspec.yaml
new file mode 100644
index 0000000000..ddaafc0fc2
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/pubspec.yaml
@@ -0,0 +1,14 @@
+name: structural_directives
+description: Structural directives example
+version: 0.0.1
+environment:
+  sdk: '>=1.13.0 <2.0.0'
+dependencies:
+  angular2: 2.0.0-beta.1
+  browser: ^0.10.0
+  dart_to_js_script_rewriter: ^0.1.0
+transformers:
+- angular2:
+    platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
+    entry_points: web/main.dart
+- dart_to_js_script_rewriter
diff --git a/public/docs/_examples/structural-directives/dart/web/index.html b/public/docs/_examples/structural-directives/dart/web/index.html
new file mode 100644
index 0000000000..fbf0f45df3
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/web/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- #docregion -->
+<html>
+
+<head>
+  <title>Angular 2 Structural Directives</title>
+  <script defer src="main.dart" type="application/dart"></script>
+  <script defer src="packages/browser/dart.js"></script>
+</head>
+
+<body>
+  <structural-directives>Loading...</structural-directives>
+</body>
+
+</html>
diff --git a/public/docs/_examples/structural-directives/dart/web/main.dart b/public/docs/_examples/structural-directives/dart/web/main.dart
new file mode 100644
index 0000000000..2c00f66c65
--- /dev/null
+++ b/public/docs/_examples/structural-directives/dart/web/main.dart
@@ -0,0 +1,7 @@
+// #docregion
+import 'package:angular2/bootstrap.dart';
+import 'package:structural_directives/structural_directives_component.dart';
+
+main() {
+  bootstrap(StructuralDirectivesComponent);
+}

From 00c01a9ba7f44a39298f9d2870a8e13dc4715c33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ad=C3=A3o=20J=C3=BAnior?= <itsjunnior@gmail.com>
Date: Fri, 15 Jan 2016 00:01:36 -0200
Subject: [PATCH 2/4] remove unused file, import file directly and omit
 brackets

---
 .../dart/lib/heavy_loader_component.dart      |  18 +--
 .../lib/structural-directives.component.html  | 109 ------------------
 .../lib/structural_directives_component.dart  |   4 +-
 3 files changed, 8 insertions(+), 123 deletions(-)
 delete mode 100644 public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html

diff --git a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
index 71ef377fee..6a00a63a8e 100644
--- a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
@@ -11,16 +11,12 @@ class HeavyLoaderComponent implements OnInit, OnDestroy {
   int id = nextId++;
   @Input() List<String> logs;
 
-  ngOnInit() {
-    // Mock todo: get 10,000 rows of data from the server
-    _log(
-        "heavy-loader ${id} initialized, loading 10,000 rows of data from the server");
-  }
+  // Mock todo: get 10,000 rows of data from the server
+  ngOnInit() => _log(
+      "heavy-loader ${id} initialized, loading 10,000 rows of data from the server");
 
-  ngOnDestroy() {
-    // Mock todo: clean-up
-    _log("heavy-loader ${id} destroyed, cleaning up");
-  }
+  // Mock todo: clean-up
+  ngOnDestroy() => _log("heavy-loader ${id} destroyed, cleaning up");
 
   _log(String msg) {
     logs.add(msg);
@@ -30,8 +26,6 @@ class HeavyLoaderComponent implements OnInit, OnDestroy {
   /// Triggers the next round of Angular change detection
   /// after one turn of the JavaScript cycle
   /// ensuring display of msg added in onDestroy
-  _tick() {
-    new Future(() {});
-  }
+  _tick() => new Future(() {});
 }
 // #enddocregion
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html b/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html
deleted file mode 100644
index f283a8677f..0000000000
--- a/public/docs/_examples/structural-directives/dart/lib/structural-directives.component.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!-- #docplaster -->
-<!-- #docregion -->
-<h1>Structural Directives</h1>
-
-<!-- #docregion structural-directives -->
-<!-- #docregion asterisk -->
-<div *ngIf="hero != null">{{hero}}</div>
-<div *ngFor="#hero of heroes">{{hero}}</div>
-<!-- #enddocregion asterisk -->
-<!-- #docregion ngSwitch -->
-<div [ngSwitch]="status">
-    <template [ngSwitchWhen]="'in-mission'">In Mission</template>
-    <template [ngSwitchWhen]="'ready'">Ready</template>
-    <template ngSwitchDefault>Unknown</template>
-</div>
-<!-- #enddocregion ngSwitch -->
-<!-- #enddocregion structural-directives -->
-
-<hr>
-
-<button
-        (click)="condition = !condition"
-        [style.background] = "condition ? 'orangered': 'lightgreen'"
->
-    Set 'condition' to {{condition ? 'False': 'True'}}
-</button>
-
-<!-- #docregion ngIf -->
-<p *ngIf="condition">
-    condition is true and ngIf is true.
-</p>
-<p *ngIf="!condition">
-    condition is false and ngIf is false.
-</p>
-<!-- #enddocregion ngIf -->
-<!-- #docregion myUnless-->
-<p *myUnless="condition">
-    condition is false and myUnless is true.
-</p>
-
-<p *myUnless="!condition">
-    condition is true and myUnless is false.
-</p>
-<!-- #enddocregion myUnless-->
-
-<hr>
-
-<!-- #docregion message-log -->
-<div><!-- Visibility -->
-    <button (click)="isVisible = !isVisible">show | hide</button>
-    <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
-</div>
-
-<div><!-- NgIf -->
-    <button (click)="condition = !condition">if | !if</button>
-    <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
-</div>
-
-<h4>heavy-loader log:</h4>
-<div *ngFor="#message of logs">{{message}}</div>
-<!-- #enddocregion message-log -->
-
-<hr>
-
-<!-- #docregion template-tag -->
-<p>
-    Hip!
-</p>
-<template>
-    <p>
-        Hip!
-    </p>
-</template>
-<p>
-    Hooray!
-</p>
-<!-- #enddocregion template-tag -->
-
-<hr>
-
-<!-- #docregion ngIf-template -->
-<!-- Examples (A) and (B) are the same -->
-<!-- (A) *ngIf paragraph -->
-<p *ngIf="condition">
-    Our heroes are true!
-</p>
-
-<!-- (B) [ngIf] with template -->
-<template [ngIf]="condition">
-    <p>
-        Our heroes are true!
-    </p>
-</template>
-<!-- #enddocregion ngIf-template -->
-
-<hr>
-
-<!-- #docregion ngFor-template -->
-<!-- Examples (A) and (B) are the same -->
-
-<!-- (A) *ngFor div -->
-<div *ngFor="#hero of heroes">{{ hero }}</div>
-
-<!-- (B) ngFor with template -->
-<template ngFor #hero [ngForOf]="heroes">
-    <div>{{ hero }}</div>
-</template>
-<!-- #enddocregion ngFor-template -->
-<!-- #enddocregion -->
diff --git a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
index aafc3d73d2..7264175143 100644
--- a/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/structural_directives_component.dart
@@ -1,8 +1,8 @@
 // #docplaster
 // #docregion
 import 'package:angular2/angular2.dart';
-import 'package:structural_directives/unless_directive.dart';
-import 'package:structural_directives/heavy_loader_component.dart';
+import 'unless_directive.dart';
+import 'heavy_loader_component.dart';
 
 @Component(
     selector: 'structural-directives',

From 8d7811fc435ef2e45f9d2720b4097e7e99b37662 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ad=C3=A3o=20J=C3=BAnior?= <itsjunnior@gmail.com>
Date: Fri, 15 Jan 2016 10:48:34 -0200
Subject: [PATCH 3/4] remove brackets string interpolation

---
 .../dart/lib/heavy_loader_component.dart                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
index 6a00a63a8e..b0714237ff 100644
--- a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
@@ -13,10 +13,10 @@ class HeavyLoaderComponent implements OnInit, OnDestroy {
 
   // Mock todo: get 10,000 rows of data from the server
   ngOnInit() => _log(
-      "heavy-loader ${id} initialized, loading 10,000 rows of data from the server");
+      "heavy-loader $id initialized, loading 10,000 rows of data from the server");
 
   // Mock todo: clean-up
-  ngOnDestroy() => _log("heavy-loader ${id} destroyed, cleaning up");
+  ngOnDestroy() => _log("heavy-loader $id destroyed, cleaning up");
 
   _log(String msg) {
     logs.add(msg);

From 11f62accd3c2233507916aa2083b4d844b7e7d04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ad=C3=A3o=20J=C3=BAnior?= <itsjunnior@gmail.com>
Date: Fri, 15 Jan 2016 21:11:43 -0200
Subject: [PATCH 4/4] change JavaScript cycle to browser event loop

---
 .../structural-directives/dart/lib/heavy_loader_component.dart  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
index b0714237ff..ecf0158c9e 100644
--- a/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
+++ b/public/docs/_examples/structural-directives/dart/lib/heavy_loader_component.dart
@@ -24,7 +24,7 @@ class HeavyLoaderComponent implements OnInit, OnDestroy {
   }
 
   /// Triggers the next round of Angular change detection
-  /// after one turn of the JavaScript cycle
+  /// after one turn of the browser event loop
   /// ensuring display of msg added in onDestroy
   _tick() => new Future(() {});
 }