Merge pull request #91 from waku-org/angular-bump-js-waku

relay-angular-chat/README.md

@@ -3,9 +3,9 @@
 **Demonstrates**:
 
 - Group messaging
-- Angular/JavaScript
+- Angular
 - Waku Relay
-- Protobuf using `protons`
+- Protobuf using `protobufjs`
 - No async/await syntax
 
 A barebones messaging app to illustrate the [Angular Relay guide](https://docs.wakuconnect.dev/docs/guides/10_angular_relay/).

relay-angular-chat/angular.json

@@ -20,7 +20,6 @@
             "outputPath": "dist/relay-angular-chat",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -29,31 +28,7 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": [],
-            "allowedCommonJsDependencies": [
-              "libp2p-gossipsub/src/utils",
-              "rlp",
-              "multiaddr/src/convert",
-              "varint",
-              "multihashes",
-              "@chainsafe/libp2p-noise/dist/src/noise",
-              "debug",
-              "libp2p",
-              "libp2p-bootstrap",
-              "libp2p-crypto",
-              "libp2p-websockets",
-              "libp2p-websockets/src/filters",
-              "libp2p/src/ping",
-              "multiaddr",
-              "peer-id",
-              "buffer",
-              "crypto",
-              "ecies-geth",
-              "secp256k1",
-              "libp2p-gossipsub",
-              "it-concat",
-              "protons"
-            ]
+            "scripts": []
           },
           "configurations": {
             "production": {
@@ -110,7 +85,6 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
@@ -126,5 +100,8 @@
       }
     }
   },
-  "defaultProject": "relay-angular-chat"
+  "defaultProject": "relay-angular-chat",
+  "cli": {
+    "analytics": false
+  }
 }

relay-angular-chat/package.json

@@ -1,50 +1,45 @@
 {
   "name": "@waku/relay-angular-chat",
   "version": "0.1.0",
-  "homepage": "/examples/relay-angular-chat",
+  "homepage": "/relay-angular-chat",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "is-ci-cli test:ci test:local",
+    "test": "exit 0",
     "test:local": "ng test",
     "test:ci": "ng test --watch=false --browsers=ChromeHeadless"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.2.0",
-    "@angular/common": "~13.2.0",
-    "@angular/compiler": "~13.2.0",
-    "@angular/core": "~13.2.0",
-    "@angular/forms": "~13.2.0",
-    "@angular/platform-browser": "~13.2.0",
-    "@angular/platform-browser-dynamic": "~13.2.0",
-    "@angular/router": "~13.2.0",
-    "crypto-browserify": "^3.12.0",
-    "js-waku": "^0.19.2",
-    "protons": "^2.0.3",
+    "@angular/animations": "~14.2.0",
+    "@angular/common": "~14.2.0",
+    "@angular/compiler": "~14.2.0",
+    "@angular/core": "~14.2.0",
+    "@angular/forms": "~14.2.0",
+    "@angular/platform-browser": "~14.2.0",
+    "@angular/platform-browser-dynamic": "~14.2.0",
+    "@angular/router": "~14.2.0",
+    "js-waku": "0.24.0-f52dd9e",
+    "protobufjs": "^7.1.0",
     "rxjs": "~7.5.0",
-    "stream-browserify": "^3.0.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.2.2",
-    "@angular/cli": "~13.2.2",
-    "@angular/compiler-cli": "~13.2.0",
-    "@types/bl": "^5.0.2",
-    "@types/jasmine": "~4.0.3",
+    "@angular-devkit/build-angular": "~14.2.1",
+    "@angular/cli": "~14.2.1",
+    "@angular/compiler-cli": "~14.2.0",
+    "@types/jasmine": "~4.3.0",
     "@types/node": "^17.0.21",
-    "assert": "^2.0.0",
-    "buffer": "^6.0.3",
     "is-ci-cli": "^2.2.0",
-    "jasmine-core": "~4.0.0",
-    "karma": "~6.3.0",
+    "jasmine-core": "~4.3.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.5.2"
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.7.4"
   }
 }

relay-angular-chat/src/app/messages/messages.component.ts

@@ -1,61 +1,63 @@
-import { Component, OnInit } from '@angular/core';
-import { WakuService } from '../waku.service';
-import { Waku, WakuMessage } from 'js-waku';
-import protons from 'protons';
+import { Component, OnInit } from "@angular/core";
+import { WakuService } from "../waku.service";
+import { Waku, WakuMessage } from "js-waku";
+import protobuf from "protobufjs";
 
-const proto = protons(`
-message SimpleChatMessage {
-  uint64 timestamp = 1;
-  string text = 2;
-}
-`);
+const ProtoChatMessage = new protobuf.Type("ChatMessage")
+  .add(new protobuf.Field("timestamp", 1, "uint32"))
+  .add(new protobuf.Field("text", 2, "string"));
 
 interface MessageInterface {
-  timestamp: Date,
-  text: string
+  timestamp: Date;
+  text: string;
 }
 
 @Component({
-  selector: 'app-messages',
-  templateUrl: './messages.component.html',
-  styleUrls: ['./messages.component.css']
+  selector: "app-messages",
+  templateUrl: "./messages.component.html",
+  styleUrls: ["./messages.component.css"],
 })
 export class MessagesComponent implements OnInit {
-
   contentTopic: string = `/relay-angular-chat/1/chat/proto`;
   messages: MessageInterface[] = [];
   messageCount: number = 0;
   waku!: Waku;
   wakuStatus!: string;
 
-  constructor(private wakuService: WakuService) { }
+  constructor(private wakuService: WakuService) {}
 
   ngOnInit(): void {
-    this.wakuService.wakuStatus.subscribe(wakuStatus => {
+    this.wakuService.wakuStatus.subscribe((wakuStatus) => {
       this.wakuStatus = wakuStatus;
     });
-    
-    this.wakuService.waku.subscribe(waku => {
+
+    this.wakuService.waku.subscribe((waku) => {
       this.waku = waku;
-      this.waku.relay.addObserver(this.processIncomingMessages, [this.contentTopic]);
+      this.waku.relay.addObserver(this.processIncomingMessages, [
+        this.contentTopic,
+      ]);
     });
 
     window.onbeforeunload = () => this.ngOnDestroy();
   }
 
   ngOnDestroy(): void {
-    this.waku.relay.deleteObserver(this.processIncomingMessages, [this.contentTopic]);
+    this.waku.relay.deleteObserver(this.processIncomingMessages, [
+      this.contentTopic,
+    ]);
   }
 
   sendMessage(): void {
     const time = new Date().getTime();
 
-    const payload = proto.SimpleChatMessage.encode({
+    const protoMsg = ProtoChatMessage.create({
       timestamp: time,
       text: `Here is a message #${this.messageCount}`,
     });
 
-    WakuMessage.fromBytes(payload, this.contentTopic).then(wakuMessage => {
+    const payload = ProtoChatMessage.encode(protoMsg).finish();
+
+    WakuMessage.fromBytes(payload, this.contentTopic).then((wakuMessage) => {
       this.waku.relay.send(wakuMessage).then(() => {
         console.log(`Message #${this.messageCount} sent`);
         this.messageCount += 1;
@@ -66,13 +68,13 @@ export class MessagesComponent implements OnInit {
   processIncomingMessages = (wakuMessage: WakuMessage) => {
     if (!wakuMessage.payload) return;
 
-    const { timestamp, text } = proto.SimpleChatMessage.decode(
+    const { text, timestamp } = ProtoChatMessage.decode(
       wakuMessage.payload
-    );
+    ) as unknown as { text: string; timestamp: bigint };
     const time = new Date();
-    time.setTime(timestamp);
+    time.setTime(Number(timestamp));
     const message = { text, timestamp: time };
 
     this.messages.push(message);
-  }
+  };
 }

relay-angular-chat/src/app/waku.service.ts

@@ -1,27 +1,30 @@
-import { Injectable } from '@angular/core';
-import { Waku } from 'js-waku';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { Injectable } from "@angular/core";
+import { Waku } from "js-waku";
+import { BehaviorSubject, Subject } from "rxjs";
+import { createWaku } from "js-waku/lib/create_waku";
+import { waitForRemotePeer } from "js-waku/lib/wait_for_remote_peer";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class WakuService {
-
   private wakuSubject = new Subject<Waku>();
   public waku = this.wakuSubject.asObservable();
 
-  private wakuStatusSubject = new BehaviorSubject('');
+  private wakuStatusSubject = new BehaviorSubject("");
   public wakuStatus = this.wakuStatusSubject.asObservable();
 
-  constructor() { }
+  constructor() {}
 
   init() {
-    Waku.create({ bootstrap: { default: true } }).then(waku => {
-      this.wakuSubject.next(waku);
-      this.wakuStatusSubject.next('Connecting...');
+    createWaku({ defaultBootstrap: true }).then((waku) => {
+      waku.start().then(() => {
+        this.wakuSubject.next(waku);
+        this.wakuStatusSubject.next("Connecting...");
 
-      waku.waitForRemotePeer().then(() => {
-        this.wakuStatusSubject.next('Connected');
+        waitForRemotePeer(waku).then(() => {
+          this.wakuStatusSubject.next("Connected");
+        });
       });
     });
   }

relay-angular-chat/src/main.ts

@@ -1,12 +1,15 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import { AppModule } from "./app/app.module";
+import { environment } from "./environments/environment";
+
+import "zone.js";
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));

relay-angular-chat/src/polyfills.ts

@@ -1,57 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
- (window as any).process = { env: { DEBUG: undefined }, };
- (window as any)['global'] = window;
- global.Buffer = global.Buffer || require('buffer').Buffer;
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

relay-angular-chat/tsconfig.app.json

@@ -7,7 +7,6 @@
   },
   "files": [
     "src/main.ts",
-    "src/polyfills.ts"
   ],
   "include": [
     "src/**/*.d.ts"

relay-angular-chat/tsconfig.json

@@ -22,11 +22,6 @@
       "es2020",
       "dom"
     ],
-    "paths": {
-      "buffer": ["node_modules/buffer"],
-      "crypto": ["node_modules/crypto-browserify"],
-      "stream": ["node_modules/stream-browserify"]
-    },
     "allowSyntheticDefaultImports": true,
   },
   "angularCompilerOptions": {

relay-angular-chat/tsconfig.spec.json

@@ -9,7 +9,6 @@
   },
   "files": [
     "src/test.ts",
-    "src/polyfills.ts"
   ],
   "include": [
     "src/**/*.spec.ts",