feat(angular): replace protons with protobufjs

As latest protons version needs to use a prot file which is not very practical for a quick example.

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/package.json

@@ -22,7 +22,7 @@
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
     "js-waku": "0.24.0-f52dd9e",
-    "protons": "^2.0.3",
+    "protobufjs": "^7.1.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

relay-angular-chat/pnpm-lock.yaml

@@ -23,7 +23,7 @@ specifiers:
   karma-coverage: ~2.1.0
   karma-jasmine: ~4.0.0
   karma-jasmine-html-reporter: ~1.7.0
-  protons: ^2.0.3
+  protobufjs: ^7.1.0
   rxjs: ~7.5.0
   tslib: ^2.3.0
   typescript: ~4.5.2
@@ -39,7 +39,7 @@ dependencies:
   '@angular/platform-browser-dynamic': 13.2.7_vkbm4mesp4vzs4r6epm7k663dq
   '@angular/router': 13.2.7_uouthnyvqoiyqb2ogpzzqrqwhi
   js-waku: 0.24.0-f52dd9e_adbj7bocxelisufu5fxaajl5fa
-  protons: 2.0.3
+  protobufjs: 7.1.0
   rxjs: 7.5.6
   tslib: 2.4.0
   zone.js: 0.11.7
@@ -7584,10 +7584,6 @@ packages:
       long: 5.2.0
     dev: false
 
-  /protocol-buffers-schema/3.6.0:
-    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
-    dev: false
-
   /protons-runtime/1.0.4:
     resolution: {integrity: sha512-DSKWjAgwaXhtYO5Jo/MrU8n/75I/P2IhxU0Fk/lSrXx6Gxl5DH+I6cHcbGAYFmAlOBmU4QRa0mvVme8VXlDeUg==}
     engines: {node: '>=16.0.0', npm: '>=7.0.0'}
@@ -7615,15 +7611,6 @@ packages:
       uint8arraylist: 2.3.2
     dev: false
 
-  /protons/2.0.3:
-    resolution: {integrity: sha512-j6JikP/H7gNybNinZhAHMN07Vjr1i4lVupg598l4I9gSTjJqOvKnwjzYX2PzvBTSVf2eZ2nWv4vG+mtW8L6tpA==}
-    dependencies:
-      protocol-buffers-schema: 3.6.0
-      signed-varint: 2.0.1
-      uint8arrays: 3.1.0
-      varint: 5.0.2
-    dev: false
-
   /proxy-addr/2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -8123,12 +8110,6 @@ packages:
   /signal-exit/3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
-  /signed-varint/2.0.1:
-    resolution: {integrity: sha512-abgDPg1106vuZZOvw7cFwdCABddfJRz5akcCcchzTbhyhYnsG31y4AlZEgp315T7W3nQq5P4xeOm186ZiPVFzw==}
-    dependencies:
-      varint: 5.0.2
-    dev: false
-
   /slash/3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -8819,10 +8800,6 @@ packages:
       builtins: 1.0.3
     dev: true
 
-  /varint/5.0.2:
-    resolution: {integrity: sha512-lKxKYG6H03yCZUpAGOPOsMcGxd1RHCu1iKvEHYDPmTyq2HueGhD73ssNBqqQWfvYs04G9iUFRvmAVLW20Jw6ow==}
-    dev: false
-
   /varint/6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
     dev: false

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);
-  }
+  };
 }