feat(example): migrate relay-js to esm

examples/relay-js/index.html

@@ -13,40 +13,25 @@
 <div id='status'></div>
 
 <input id='textInput' placeholder='Type your message here' type='text'>
-<button id='sendButton' onclick='sendMessage();' type='button'>Send Message
+<button id='sendButton' type='button'>Send Message
 </button>
 
 <div><h1>Messages</h1></div>
 <div id='messages'></div>
 
 
-<script
-  src='https://unpkg.com/js-waku@latest/build/umd/js-waku.min.bundle.js'></script>
-<script>
+<script type='module'>
   /**
    * Demonstrate usage of js-waku in the browser. Use relay, gossip sub protocol to send and receive messages.
    * Recommended payload is protobuf. Using simple utf-8 string for demo purposes only.
-   *
-   * - API documentation: https://js-waku.wakuconnect.dev/
-   * - Guides: https://docs.wakuconnect.dev/
-   *
-   * Note: open this HTML in two different browsers to experience decentralized communication.
-   * A node will not show its own messages, this can be changed by modifying the `Waku.create` call:
-   *
-   * Waku.create({
-   *     bootstrap: {default: true}, libp2p: {
-   *         config: {
-   *             pubsub: {
-   *                 enabled: true,
-   *                 emitSelf: true,
-   *             },
-   *         },
-   *     },
-   * })
-   *
    */
 
-  const { Waku, WakuMessage } = jswaku;
+  import {
+    createWaku,
+    waitForRemotePeer,
+    WakuMessage
+  } from '../../dist/bundle.js';
+
   const statusDiv = document.getElementById('status');
   const messagesDiv = document.getElementById('messages');
   const textInput = document.getElementById('textInput');
@@ -63,10 +48,6 @@
   // for simplicity's sake.
   const contentTopic = '/relay-demo/1/message/utf-8';
 
-  // Function to be used to send the text input over Waku.
-  let sendMessage = () => {
-  };
-
   try {
     statusDiv.innerHTML = '<p>Starting</p>';
 
@@ -75,16 +56,13 @@
     // We are currently working on migrating this method to DNS Discovery.
     //
     // https://js-waku.wakuconnect.dev/classes/waku.Waku.html#create
-    Waku.create({ bootstrap: { default: true } }).catch(e => {
-        statusDiv.innerHTML = 'Error';
-        console.log('Issue starting Waku node', e);
-      }
-    ).then(wakuNode => {
+    const waku = await createWaku({ bootstrap: { default: true } });
+    await waku.start();
 
     // Had a hook to process all incoming messages on a specified content topic.
     //
     // https://js-waku.wakuconnect.dev/classes/waku_relay.WakuRelay.html#addObserver
-      wakuNode.relay.addObserver((wakuMessage) => {
+    waku.relay.addObserver((wakuMessage) => {
 
       // Checks there is a payload on the message.
       // Waku Message is encoded in protobuf, in proto v3 fields are always optional.
@@ -108,19 +86,13 @@
     // waku nodes (peers) and for appropriate handshakes to be done.
     //
     // https://js-waku.wakuconnect.dev/classes/waku.Waku.html#waitForRemotePeer
-      wakuNode.waitForRemotePeer()
-        .catch((e) => {
-          statusDiv.innerHTML = 'Failed to connect to peers: ' + e.toString();
-        })
-        .then(() => {
+    await waitForRemotePeer(waku);
 
     // We are now connected to a remote peer, let's define the `sendMessage`
     // function that sends the text input over Waku Relay, the gossipsub
     // protocol.
-          sendMessage = () => {
+    sendButton.onclick = async () => {
       const text = textInput.value;
-            // Reset the text input.
-            textInput.value = null;
 
       // Helper functions are available to create a Waku Message.
       // These functions also provide native symmetric, asymmetric encryption,
@@ -131,19 +103,15 @@
       // serialize a data structure.
       //
       // https://js-waku.wakuconnect.dev/classes/waku_message.WakuMessage.html#fromUtf8String
-            WakuMessage.fromUtf8String(text, contentTopic).catch(e => console.log('Error encoding message', e)).then(
-              wakuMessage => {
+      const wakuMessage = await WakuMessage.fromUtf8String(text, contentTopic);
       // Once the message is constructed, send it over Waku Relay.
       //
       // https://js-waku.wakuconnect.dev/classes/waku_relay.WakuRelay.html#send
-                wakuNode.relay.send(wakuMessage).catch((e) => {
-                  console.log('Error sending message', e);
-                }).then(() => {
-                  console.log('Message sent', text);
-                });
-              }
-            );
+      await waku.relay.send(wakuMessage);
+      console.log('Message sent!');
 
+      // Reset the text input.
+      textInput.value = null;
     };
 
     // Ready to send & receive messages, enable text input.
@@ -151,10 +119,8 @@
     sendButton.disabled = false;
     statusDiv.innerHTML = '<p>Ready!</p>';
 
-        });
-    });
   } catch (e) {
-    timestampDiv.innerHTML = 'Failed to start application';
+    statusDiv.innerHTML = 'Failed to start application';
     console.log(e);
   }
 </script>