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`.
-- No async/await syntax.
+- Protobuf using `protobufjs`.
 
 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
-npm install   # Install dependencies for js-waku
-npm run build # Build js-waku
-cd examples/relay-reactjs-chat
-npm install   # Install dependencies for the web app
-npm run start # Start development server to serve the web app on http://localhost:3000/
+git clone https://github.com/waku-org/js-waku-examples/
+cd js-waku-examples/relay-reactjs-chat
+npm install
+npm run start
 ```

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/react": "^13.2.0",
-    "@testing-library/user-event": "^14.0.4",
-    "js-waku": "^0.24.0",
-    "protobufjs": "^6.11.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "js-waku": "0.24.0-63bfb9b",
+    "protobufjs": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {
-    "start": "cra-webpack-rewired start",
-    "build": "cra-webpack-rewired build",
-    "test": "cra-webpack-rewired test",
-    "eject": "cra-webpack-rewired eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -40,9 +40,6 @@
     ]
   },
   "devDependencies": {
-    "cra-webpack-rewired": "^1.0.1",
-    "process": "^0.11.10",
-    "stream-browserify": "^3.0.0",
-    "typescript": "^4.7.4"
+    "@craco/craco": "7.0.0-alpha.7"
   }
 }

relay-reactjs-chat/src/App.js

@@ -1,11 +1,12 @@
-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"));
 
 function App() {
@@ -20,24 +21,27 @@ function App() {
         if (wakuStatus !== "None") return;
 
         setWakuStatus("Starting");
+        (async () => {
+
+            const waku = await createWaku({defaultBootstrap: true})
 
-    Waku.create({ bootstrap: { default: true } }).then((waku) => {
             setWaku(waku);
+            await waku.start();
             setWakuStatus("Connecting");
-      waku.waitForRemotePeer().then(() => {
+            await waitForRemotePeer(waku, ["relay"]);
             setWakuStatus("Ready");
-      });
-    });
+        })();
     }, [waku, wakuStatus]);
 
     const processIncomingMessage = React.useCallback((wakuMessage) => {
         if (!wakuMessage.payload) return;
 
-    const { text, timestamp } = SimpleChatMessage.decode(wakuMessage.payload);
+        const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
 
         const time = new Date();
+
         time.setTime(timestamp);
-    const message = { text, timestamp: time };
+        const message = {text, timestamp: time};
 
         setMessages((messages) => {
             return [message].concat(messages);

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>,
-  document.getElementById('root')
+  </React.StrictMode>
 );