Merge pull request #366 from victornoel/better-angular-demo

Simplify angular demo

examples/angular/.angular-cli.json

@@ -36,7 +36,8 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
     },
     {
       "project": "src/tsconfig.spec.json"

examples/angular/package.json

@@ -12,38 +12,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@angular/common": "^4.1.0",
+    "@angular/compiler": "^4.1.0",
+    "@angular/core": "^4.1.0",
+    "@angular/forms": "^4.1.0",
+    "@angular/http": "^4.1.0",
+    "@angular/platform-browser": "^4.1.0",
+    "@angular/platform-browser-dynamic": "^4.1.0",
+    "@angular/router": "^4.1.0",
     "core-js": "^2.4.1",
-    "express-http-proxy": "^0.11.0",
-    "gun": "^0.7.2",
-    "gun-edge": "^0.8.8",
+    "express-http-proxy": "^1.0.1",
+    "gun": "^0.7.4",
+    "ngx-pipes": "^1.5.10",
     "rxjs": "^5.3.0",
-    "zone.js": "^0.8.4"
+    "underscore": "^1.8.3",
+    "zone.js": "^0.8.9"
   },
   "devDependencies": {
     "@angular/cli": "1.0.0",
-    "@angular/compiler-cli": "^4.0.0",
+    "@angular/compiler-cli": "^4.1.0",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
+    "@types/underscore": "^1.8.0",
+    "codelyzer": "^2.1.1",
+    "jasmine-core": "^2.6.1",
+    "jasmine-spec-reporter": "^4.0.0",
+    "karma": "^1.6.0",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
+    "ts-node": "^3.0.2",
     "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "typescript": "^2.3.2"
   }
 }

examples/angular/src/app/app.component.html

@@ -6,6 +6,8 @@
   </form>
   <br />
   <ul>
-    <li *ngFor="let todo of todos$ | async">{{todo.val}}</li>
+    <li *ngFor="let todo of todos$ | async | pairs" (click)="delete(todo[0])">{{todo[1]}}</li>
   </ul>
+  <button (click)="sub()" *ngIf="!todosSub">Log in console</button>
+  <button (click)="unsub()" *ngIf="!!todosSub">Stop logging</button>
 </div>

examples/angular/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { $rx } from 'gun-edge/edge/observable/rx';
-import Gun from 'gun/gun';
 import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import Gun from 'gun/gun';
 
-import { GunDb } from 'app/app.module';
+import { GunDb } from 'app/gun.service';
+import { on$ } from 'app/gun.helper';
 
 @Component({
   selector: 'app-root',
@@ -14,20 +15,30 @@ export class AppComponent implements OnInit {
   newTodo = '';
 
   todos = this.db.gun.get('todos');
-  todos$: Observable<string[]> = $rx(this.todos)
-    .startWith([])
-    .map(o => Object.keys(o).filter(k => typeof o[k] === 'string').map(k => ({ key: k, val: (o[k] as string) })));
+  todos$: Observable<string[]> = on$(this.todos);
+
+  todosSub: Subscription;
 
   constructor(private db: GunDb) { }
 
-  ngOnInit() {
-    $rx(this.todos).subscribe(x => console.log(x));
-  }
+  ngOnInit() { }
 
   add() {
     if (this.newTodo) {
-      this.todos.path(Gun.text.random()).put(this.newTodo);
+      this.todos.get(Gun.text.random()).put(this.newTodo);
       this.newTodo = '';
     }
   }
+
+  delete(key: string) {
+    this.todos.get(key).put(null);
+  }
+
+  sub() {
+    this.todosSub = this.todos$.subscribe(v => console.log(v));
+  }
+
+  unsub() {
+    this.todosSub.unsubscribe();
+  }
 }

examples/angular/src/app/app.module.ts

@@ -3,10 +3,10 @@ import { NgModule, Injectable } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-
-import Gun from 'gun/gun';
+import { NgPipesModule } from 'ngx-pipes';
 
 import { AppComponent } from './app.component';
+import { GunDb } from 'app/gun.service';
 
 @NgModule({
   declarations: [
@@ -15,15 +15,10 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    NgPipesModule
   ],
   providers: [GunDb],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-
-@Injectable()
-export class GunDb {
-
-  readonly gun = Gun(location.origin + '/gun');
-}

examples/angular/src/app/gun.helper.ts

@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs/Observable';
+import { Gun } from 'gun/gun';
+import { pick } from 'underscore';
+
+export function on$(node, cleanup = true): Observable<any> {
+    return Observable.fromEventPattern(
+        h => {
+            // there is no way to off() an on() until at least one value is trigerred
+            // so that we can access the event listener to off() it
+            const signal = { stop: false };
+            node.on((data, key, at, ev) => {
+                if (signal.stop) {
+                    ev.off();
+                } else {
+                    // modifying data directly does not seem to work...
+                    h(cleanup ? pick(data, (v, k, o) => v !== null && k !== '_') : data);
+                }
+            });
+            return signal;
+        },
+        (h, signal) => { signal.stop = true; }
+    );
+}
+
+export function val$(node): Observable<any> {
+    return new Observable(o => node.val(v => {
+        o.next(v);
+        o.complete();
+    }));
+}

examples/angular/src/app/gun.service.ts

@@ -0,0 +1,7 @@
+import { NgModule, Injectable } from '@angular/core';
+import Gun from 'gun/gun';
+
+@Injectable()
+export class GunDb {
+    readonly gun = Gun(location.origin + '/gun');
+}

examples/angular/src/main.ts

@@ -4,8 +4,10 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
-import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
+
+import 'rxjs/add/observable/fromEventPattern';
 
 if (environment.production) {
   enableProdMode();