feat(example): migrate store-js to esm

examples/store-js/index.html

@@ -12,9 +12,13 @@
 <div><h1>Timestamp of latest relay ping</h1></div>
 <div id='timestamp'></div>
 
-<script
+<script type='module'>
-  src='https://unpkg.com/js-waku@latest/build/umd/js-waku.min.bundle.js'></script>
+  import {
-<script>
+    createWaku,
+    waitForRemotePeer,
+    Protocols
+  } from '../../dist/bundle.min.js';
+
   /**
    * This example demonstrates how to use the js-waku minified bundle
    * available on unpkg.com.
@@ -25,56 +29,48 @@
   const timestampDiv = document.getElementById('timestamp');
 
   try {
+    timestampDiv.innerHTML = '<p>Creating waku.</p>';
+    const node = await createWaku({ bootstrap: { default: true } });
+
     timestampDiv.innerHTML = '<p>Starting waku.</p>';
-    jswaku.Waku.create({ bootstrap: { default: true } }).catch(e => {
+    await node.start();
-        timestampDiv.innerHTML = 'Failed to create Waku: ' + e.toString();
+
+    timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
+    await waitForRemotePeer(node, [Protocols.Store]);
+
+    timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
+    const callback = (wakuMessages) => {
+      // Messages are ordered with oldest first
+      // even with page direction `backward`
+      const latestFirst = wakuMessages.reverse();
+      const latestMessage = latestFirst[0];
+      if (latestMessage) {
+        timestampDiv.innerHTML = latestMessage.timestamp;
+      } else {
+        timestampDiv.innerHTML = '<p>No ping message available</p>';
       }
-    ).then(waku => {
-      timestampDiv.innerHTML = '<p>Connecting to a peer.</p>';
-      waku.waitForRemotePeer()
-        .catch((e) => {
-          timestampDiv.innerHTML = 'Failed to connect to peers' + e.toString();
-        })
-        .then(() => {
-          timestampDiv.innerHTML = '<p>Retrieving messages.</p>';
 
-          const callback = (wakuMessages) => {
+      // When returning true, `queryHistory` stops retrieving pages
-            // Messages are ordered with oldest first
+      // In our case, we only want one message, hence one page.
-            // even with page direction `backward`
+      return true;
-            const latestFirst = wakuMessages.reverse();
+    };
-            const latestMessage = latestFirst[0];
-            if (latestMessage) {
-              timestampDiv.innerHTML = latestMessage.timestamp;
-            } else {
-              timestampDiv.innerHTML = '<p>No ping message available</p>';
-            }
 
-            // When returning true, `queryHistory` stops retrieving pages
+    const startTime = new Date();
-            // In our case, we only want one message, hence one page.
+    // Only retrieve a week of messages
-            return true;
+    startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
-          };
 
-          const startTime = new Date();
+    await node.store
-          // Only retrieve a week of messages
+      .queryHistory(['/relay-ping/1/ping/null'], {
-          startTime.setTime(Date.now() - 7 * 24 * 60 * 60 * 1000);
+        callback,
-
+        pageDirection: 'backward',
-          waku.store
+        pageSize: 1,
-            .queryHistory(['/relay-ping/1/ping/null'], {
+        timeFilter: {
-              callback,
+          startTime,
-              pageDirection: 'backward',
+          endTime: new Date()
-              pageSize: 1,
+        }
-              timeFilter: {
+      });
-                startTime,
-                endTime: new Date()
-              }
-            })
-            .catch((e) => {
-              timestampDiv.innerHTML = 'Failed to retrieve messages' + e.toString();
-            });
-        });
-    });
   } catch (e) {
-    timestampDiv.innerHTML = 'Failed to start application' + e.toString();
+    timestampDiv.innerHTML = 'Error encountered: ' + e.toString();
   }
 </script>
 </body>