build(relay-reactjs): bump to js-waku@next

relay-reactjs-chat/.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

relay-reactjs-chat/README.md

@@ -6,20 +6,15 @@
 - React/JavaScript
 - `create-react-app`/`react-scripts` 5.0.0
 - Waku Relay
-- Protobuf using `protons`.
+- Protobuf using `protobufjs`.
-- No async/await syntax.
 
 A barebone chat app to illustrate the [ReactJS Relay guide](https://docs.wakuconnect.dev/docs/guides/07_reactjs_relay/).
 
-The `master` branch's HEAD is deployed at https://js-waku.wakuconnect.dev/examples/relay-reactjs-chat/.
-
 To run a development version locally, do:
 
 ```shell
-git clone https://github.com/status-im/js-waku/ ; cd js-waku
+git clone https://github.com/waku-org/js-waku-examples/
-npm install   # Install dependencies for js-waku
+cd js-waku-examples/relay-reactjs-chat
-npm run build # Build js-waku
+npm install
-cd examples/relay-reactjs-chat
+npm run start
-npm install   # Install dependencies for the web app
-npm run start # Start development server to serve the web app on http://localhost:3000/
 ```

relay-reactjs-chat/config/webpack.extend.js

@@ -1,60 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  dev: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('dev'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-  prod: (config) => {
-    // Override webpack 5 config from react-scripts to load polyfills
-    if (!config.resolve) config.resolve = {};
-    if (!config.resolve.fallback) config.resolve.fallback = {};
-    Object.assign(config.resolve.fallback, {
-      buffer: require.resolve('buffer'),
-      crypto: false,
-      stream: require.resolve('stream-browserify'),
-    });
-
-    if (!config.plugins) config.plugins = [];
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.ENV': JSON.stringify('prod'),
-      })
-    );
-    config.plugins.push(
-      new webpack.ProvidePlugin({
-        process: 'process/browser.js',
-        Buffer: ['buffer', 'Buffer'],
-      })
-    );
-
-    if (!config.ignoreWarnings) config.ignoreWarnings = [];
-    config.ignoreWarnings.push(/Failed to parse source map/);
-
-    return config;
-  },
-};

relay-reactjs-chat/craco.config.js

@@ -0,0 +1,26 @@
+const {getLoaders, loaderByName} = require("@craco/craco");
+
+module.exports = {
+    webpack: {
+        configure: (webpackConfig) => {
+            const {hasFoundAny, matches} = getLoaders(webpackConfig, loaderByName("babel-loader"));
+
+            if (hasFoundAny) {
+                matches.forEach(c => {
+                    // Modify test to include cjs for @chainsafe/libp2p-gossipsub rpc module
+                    if (c.loader.test.toString().includes("mjs")) {
+                        // If your project uses typescript then do not forget to include `ts`/`tsx`
+                        if (c.loader.test.toString().includes('jsx')) {
+                            c.loader.test = /\.(js|cjs|mjs|jsx)$/
+                        } else {
+                            c.loader.test = /\.(js|cjs|mjs)$/
+                        }
+                    }
+                });
+            }
+
+            return webpackConfig;
+        }
+    }
+}
+

relay-reactjs-chat/package.json

@@ -2,22 +2,22 @@
   "name": "relay-reactjs-chat",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/examples/relay-reactjs-chat",
+  "homepage": "/relay-reactjs-chat",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.0.4",
+    "@testing-library/user-event": "^13.5.0",
-    "js-waku": "^0.24.0",
+    "js-waku": "0.24.0-63bfb9b",
-    "protobufjs": "^6.11.2",
+    "protobufjs": "^7.0.0",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "cra-webpack-rewired start",
+    "start": "craco start",
-    "build": "cra-webpack-rewired build",
+    "build": "craco build",
-    "test": "cra-webpack-rewired test",
+    "test": "craco test",
-    "eject": "cra-webpack-rewired eject"
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -40,9 +40,6 @@
     ]
   },
   "devDependencies": {
-    "cra-webpack-rewired": "^1.0.1",
+    "@craco/craco": "7.0.0-alpha.7"
-    "process": "^0.11.10",
-    "stream-browserify": "^3.0.0",
-    "typescript": "^4.7.4"
   }
 }

relay-reactjs-chat/src/App.js

@@ -1,111 +1,115 @@
-import { Waku, WakuMessage } from "js-waku";
+import {WakuMessage, waitForRemotePeer} from "js-waku";
 import * as React from "react";
 import protobuf from "protobufjs";
+import {createWaku} from "js-waku/lib/create_waku";
 
 const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;
 
 const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
-  .add(new protobuf.Field("timestamp", 1, "uint64"))
+    .add(new protobuf.Field("timestamp", 1, "uint32"))
-  .add(new protobuf.Field("text", 2, "string"));
+    .add(new protobuf.Field("text", 2, "string"));
 
 function App() {
-  const [waku, setWaku] = React.useState(undefined);
+    const [waku, setWaku] = React.useState(undefined);
-  const [wakuStatus, setWakuStatus] = React.useState("None");
+    const [wakuStatus, setWakuStatus] = React.useState("None");
-  // Using a counter just for the messages to be different
+    // Using a counter just for the messages to be different
-  const [sendCounter, setSendCounter] = React.useState(0);
+    const [sendCounter, setSendCounter] = React.useState(0);
-  const [messages, setMessages] = React.useState([]);
+    const [messages, setMessages] = React.useState([]);
 
-  React.useEffect(() => {
+    React.useEffect(() => {
-    if (!!waku) return;
+        if (!!waku) return;
-    if (wakuStatus !== "None") return;
+        if (wakuStatus !== "None") return;
 
-    setWakuStatus("Starting");
+        setWakuStatus("Starting");
+        (async () => {
 
-    Waku.create({ bootstrap: { default: true } }).then((waku) => {
+            const waku = await createWaku({defaultBootstrap: true})
-      setWaku(waku);
-      setWakuStatus("Connecting");
-      waku.waitForRemotePeer().then(() => {
-        setWakuStatus("Ready");
-      });
-    });
-  }, [waku, wakuStatus]);
 
-  const processIncomingMessage = React.useCallback((wakuMessage) => {
+            setWaku(waku);
-    if (!wakuMessage.payload) return;
+            await waku.start();
+            setWakuStatus("Connecting");
+            await waitForRemotePeer(waku, ["relay"]);
+            setWakuStatus("Ready");
+        })();
+    }, [waku, wakuStatus]);
 
-    const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
+    const processIncomingMessage = React.useCallback((wakuMessage) => {
+        if (!wakuMessage.payload) return;
 
-    const time = new Date();
+        const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
-    time.setTime(timestamp);
-    const message = { text, timestamp: time };
 
-    setMessages((messages) => {
+        const time = new Date();
-      return [message].concat(messages);
-    });
-  }, []);
 
-  React.useEffect(() => {
+        time.setTime(timestamp);
-    if (!waku) return;
+        const message = {text, timestamp: time};
 
-    // Pass the content topic to only process messages related to your dApp
+        setMessages((messages) => {
-    waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+            return [message].concat(messages);
+        });
+    }, []);
 
-    // `cleanUp` is called when the component is unmounted, see ReactJS doc.
+    React.useEffect(() => {
-    return function cleanUp() {
+        if (!waku) return;
-      waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
+
+        // Pass the content topic to only process messages related to your dApp
+        waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+
+        // `cleanUp` is called when the component is unmounted, see ReactJS doc.
+        return function cleanUp() {
+            waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
+        };
+    }, [waku, wakuStatus, processIncomingMessage]);
+
+    const sendMessageOnClick = () => {
+        // Check Waku is started and connected first.
+        if (wakuStatus !== "Ready") return;
+
+        sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
+            console.log("Message sent")
+        );
+
+        // For demonstration purposes.
+        setSendCounter(sendCounter + 1);
     };
-  }, [waku, wakuStatus, processIncomingMessage]);
 
-  const sendMessageOnClick = () => {
+    return (
-    // Check Waku is started and connected first.
+        <div className="App">
-    if (wakuStatus !== "Ready") return;
+            <header className="App-header">
-
+                <p>{wakuStatus}</p>
-    sendMessage(`Here is message #${sendCounter}`, waku, new Date()).then(() =>
+                <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
-      console.log("Message sent")
+                    Send Message
+                </button>
+                <ul>
+                    {messages.map((msg) => {
+                        return (
+                            <li key={msg.timestamp.valueOf()}>
+                                <p>
+                                    {msg.timestamp.toString()}: {msg.text}
+                                </p>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </header>
+        </div>
     );
-
-    // For demonstration purposes.
-    setSendCounter(sendCounter + 1);
-  };
-
-  return (
-    <div className="App">
-      <header className="App-header">
-        <p>{wakuStatus}</p>
-        <button onClick={sendMessageOnClick} disabled={wakuStatus !== "Ready"}>
-          Send Message
-        </button>
-        <ul>
-          {messages.map((msg) => {
-            return (
-              <li key={msg.timestamp.valueOf()}>
-                <p>
-                  {msg.timestamp.toString()}: {msg.text}
-                </p>
-              </li>
-            );
-          })}
-        </ul>
-      </header>
-    </div>
-  );
 }
 
 function sendMessage(message, waku, timestamp) {
-  const time = timestamp.getTime();
+    const time = timestamp.getTime();
 
-  // Encode to protobuf
+    // Encode to protobuf
-  const protoMsg = SimpleChatMessage.create({
+    const protoMsg = SimpleChatMessage.create({
-    timestamp: time,
+        timestamp: time,
-    text: message,
+        text: message,
-  });
+    });
-  const payload = SimpleChatMessage.encode(protoMsg).finish();
+    const payload = SimpleChatMessage.encode(protoMsg).finish();
 
-  // Wrap in a Waku Message
+    // Wrap in a Waku Message
-  return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
+    return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
-    // Send over Waku Relay
+        // Send over Waku Relay
-    waku.relay.send(wakuMessage)
+        waku.relay.send(wakuMessage)
-  );
+    );
 }
 
 export default App;

relay-reactjs-chat/src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
-  document.getElementById('root')
 );