feat!: Replace old fluence-js with JS Client (#425)

js-client-examples/browser-example/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# fluence
+
+src/_aqua/*
+
+public/*.wasm
+public/runnerScript.*

js-client-examples/browser-example/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    semi: true,
+    trailingComma: 'all',
+    singleQuote: true,
+    printWidth: 120,
+    tabWidth: 4,
+    useTabs: false,
+};

js-client-examples/browser-example/README.md

@@ -0,0 +1,147 @@
+# Getting Started with Fluence
+
+This sample project demonstrates how fluence network can be accessed from the browser. As an example it retrieves the timestamp of the current time from the relay node. The project is based on an create-react-app template with slight modifications to integrate Fluence. The primary focus is the integration itself, i.e React could be swapped with a framework of your choice.
+
+## Getting started
+
+Run aqua compiler in watch mode:
+
+```bash
+npm run watch-aqua
+```
+
+Start the application
+
+```bash
+npm start
+```
+
+The browser window with `localhost:3000` should open
+
+## How it works
+
+The application can be split into two main building blocks: the runtime provided by the `@fluencelabs/fluence` package and the compiler for the `Aqua` language. The workflow is as follows:
+
+1. You write aqua code
+2. Aqua gets compiled into the typescript file
+3. The typescript is build by the webpack (or any other tool of you choice) into js bunlde.
+
+## Project structure
+
+```
+aqua                    (1)
+ ┗ getting-started.aqua (3)
+node_modules
+public                  
+src
+ ┣ _aqua                (2)
+ ┃ ┗ getting-started.ts (4)
+ ┣ App.scss
+ ┣ App.tsx
+ ┣ index.css
+ ┣ index.tsx
+ ┣ logo.svg
+ ┗ react-app-env.d.ts    
+package-lock.json
+package.json          
+tsconfig.json
+```
+
+The project structure is based on the create-react-app template with some minor differences:
+
+* `aqua` (1) contains the Aqua source code files. The complier picks them up and generate corresponding typescript file. See `getting-started.aqua` (3) and `getting-started.ts` respectively
+* `src/_aqua` (2) is where the generated target files are places. The target directory is conveniently placed inside the sources directory which makes it easy to import typescript functions from the application source code
+
+## npm packages and scripts
+
+The following npm packages are used:
+
+* `@fluencelabs/fluence` - is the client for Fluence Network running inside the browser. See https://github.com/fluencelabs/fluence-js for additional information
+* `@fluencelabs/fluence-network-environment` - is the maintained list of Fluence networks and nodes to connect to.
+* `@fluencelabs/aqua` - is the command line interface for Aqua compiler. See https://github.com/fluencelabs/aqua for more information
+* `@fluencelabs/aqua-lib` - Aqua language standard library
+* `chokidar-cli` - A tool to watch for aqua file changes and compile them on the fly
+
+The compilation of aqua code is implemented with these scripts:
+
+```
+scripts: {
+...
+    "compile-aqua": "aqua -i ./aqua/ -o ./src/_aqua",
+    "watch-aqua": "chokidar \"**/*.aqua\" -c \"npm run compile-aqua\""
+}
+...
+```
+
+The interface is pretty straightforward: you just specify the input and output directories for the compiler.
+
+## Aqua code
+
+```
+import "@fluencelabs/aqua-lib/builtin.aqua"
+
+func getRelayTime(relayPeerId: PeerId) -> u64: (1)
+    on relayPeerId:                            (2)
+        ts <- Peer.timestamp_ms()              (3)
+    <- ts                                      (4)
+
+```
+
+The code above defines a function which retrieves the current timestamp from the relay node. The function works as following:
+
+1. The function definition, specifying arguments and return value types
+2. Shift the execution to the peer with id equal to `relayPeerId`
+3. Calls built-in function on the current peer and stores the result into a variable
+4. Returns the result
+
+The function gets compiled into typescript and can be called from the application code (see next section)
+
+## Application code
+
+Let's take a look at how we can use Fluence from typecript.
+
+First, we need to import the relevant packages:
+
+```typescript
+import { createClient, FluenceClient } from "@fluencelabs/fluence";
+import { krasnodar } from "@fluencelabs/fluence-network-environment";
+import { getRelayTime } from "./_aqua/getting-started";
+```
+
+Please notice that the function defined in Aqua has been compiled into typescript and can be directly imported. Using the code generated by the compiler is as easy as calling a function. The compiler generates all the boilerplate needed to send a particle into the network and wraps it into a single call. Note that all the type information and therefore type checking and code completion facilities are there!
+
+Next we initialize the client:
+
+```typescript
+const relayNode = krasnodar[0];
+
+function App() {
+  const [client, setClient] = useState<FluenceClient | null>(null);
+
+  ... 
+
+  useEffect(() => {
+    createClient(relayNode)
+      .then((client) => setClient(client))
+      .catch((err) => console.log("Client initialization failed", err));
+  }, [client]);
+```
+
+Every peer running in the browser must connect to the network through a relay node. We use the first node of the krasnodar network there. In our example we store the client using React `useState` facilities. Feel free to store wherever you store other application state.
+
+Executing Aqua is as easy as calling a function in typesctipt:
+
+```typescript
+  const doGetRelayTime = async () => {
+    if (!client) {
+      return;
+    }
+
+    const time = await getRelayTime(client, relayNode.peerId);
+    setRelayTime(new Date(time));
+  };
+```
+
+
+
+

js-client-examples/browser-example/aqua/getting-started.aqua

@@ -0,0 +1,6 @@
+import "@fluencelabs/aqua-lib/builtin.aqua"
+
+func getRelayTime(relayPeerId: PeerId) -> u64:
+    on relayPeerId:
+        ts <- Peer.timestamp_ms()
+    <- ts

js-client-examples/browser-example/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    preset: 'jest-puppeteer',
+    testMatch: ['**/?(*.)+(spec|test).[t]s'],
+    testPathIgnorePatterns: ['/node_modules/', 'dist'],
+    transform: {
+        '^.+\\.ts?$': 'ts-jest',
+    },
+};

js-client-examples/browser-example/package.json

@@ -0,0 +1,63 @@
+{
+    "name": "getting-started-browser",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@fluencelabs/js-client.api": "0.11.2",
+        "@fluencelabs/fluence-network-environment": "1.0.14",
+        "@testing-library/jest-dom": "^5.14.1",
+        "@testing-library/react": "^11.2.7",
+        "@testing-library/user-event": "^12.8.3",
+        "@types/jest": "^27.4.0",
+        "@types/node": "^12.20.16",
+        "@types/react": "^17.0.14",
+        "@types/react-dom": "^17.0.9",
+        "@types/serve-handler": "^6.1.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-scripts": "^5.0.0",
+        "typescript": "^4.6.3",
+        "web-vitals": "^1.1.2"
+    },
+    "scripts": {
+        "prestart": "npm run compile-aqua",
+        "prebuild": "npm run compile-aqua",
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "jest --config=jest.config.js",
+        "_test": "react-scripts test",
+        "eject": "react-scripts eject",
+        "compile-aqua": "fluence aqua -i ./aqua/ -o ./src/_aqua",
+        "watch-aqua": "fluence aqua -w -i ./aqua/ -o ./src/_aqua"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all",
+            "not ie 11",
+            "not android 4.4.3-4.4.4"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@fluencelabs/cli": "0.2.41",
+        "@fluencelabs/aqua-lib": "0.6.0",
+        "@types/jest-environment-puppeteer": "^4.4.1",
+        "@types/puppeteer": "^5.4.4",
+        "jest-puppeteer": "^6.0.2",
+        "sass": "^1.58.3",
+        "serve": "^13.0.2",
+        "ts-jest": "^27.1.3"
+    }
+}

js-client-examples/browser-example/public/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>Fluence getting started</title>
+  <script src='https://cdn.jsdelivr.net/npm/@fluencelabs/js-client.web.standalone@0.13.3/dist/js-client.min.js'
+    async></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

js-client-examples/browser-example/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

js-client-examples/browser-example/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

js-client-examples/browser-example/src/App.scss

@@ -0,0 +1,63 @@
+$color1: black;
+$color2: rgb(214, 214, 214);
+$accent-color: rgb(225, 30, 90);
+
+.logo {
+  height: 15vmin;
+  pointer-events: none;
+}
+
+.mono {
+  font-family: monospace, monospace;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+header {
+  margin-top: 10vmin;
+}
+
+header,
+h1,
+h2,
+h3 {
+  text-align: center;
+}
+
+.content {
+  width: 800px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.btn {
+  height: 26px;
+  border: 1px solid;
+  border-color: $color2;
+
+  background-color: transparent;
+
+  margin: 5px;
+
+  font-size: 16px;
+
+  color: $color1;
+
+  &::placeholder {
+    color: $color2;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 1px solid white;
+    border-color: $accent-color;
+    color: $accent-color;
+  }
+}

js-client-examples/browser-example/src/App.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import logo from './logo.svg';
+import './App.scss';
+
+import { Fluence } from '@fluencelabs/js-client.api';
+import type { ConnectionState } from '@fluencelabs/js-client.api';
+import { krasnodar } from '@fluencelabs/fluence-network-environment';
+import { getRelayTime } from './_aqua/getting-started';
+
+const relayNode = krasnodar[0];
+
+function App() {
+    const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
+    const [relayTime, setRelayTime] = useState<Date | null>(null);
+
+    useEffect(() => {
+        Fluence.onConnectionStateChange((state) => {
+            setConnectionState(state);
+        });
+    }, []);
+
+    const onGetRelayTimeBtnClick = async () => {
+        if (connectionState !== 'connected') {
+            return;
+        }
+
+        const time = await getRelayTime(relayNode.peerId);
+        setRelayTime(new Date(time));
+    };
+
+    return (
+        <div className="App">
+            <header>
+                <img src={logo} className="logo" alt="logo" />
+            </header>
+
+            <div className="content">
+                <h1>
+                    Connection state: <span id="status">{connectionState}</span>
+                </h1>
+                <button
+                    id="btn"
+                    className="btn"
+                    onClick={onGetRelayTimeBtnClick}
+                    disabled={connectionState !== 'connected'}
+                >
+                    Get relay time
+                </button>
+                {relayTime && (
+                    <>
+                        <h2>Relay time:</h2>
+                        <div id="relayTime">{relayTime?.toLocaleString() || ''}</div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default App;

js-client-examples/browser-example/src/__test__/test.spec.ts

@@ -0,0 +1,52 @@
+import handler from 'serve-handler';
+import http from 'http';
+import path from 'path';
+
+const port = 3000;
+const uri = `http://localhost:${port}/`;
+const publicPath = path.join(__dirname, '../../build/');
+
+console.log(publicPath);
+
+const server = http.createServer((request, response) => {
+    return handler(request, response, {
+        public: publicPath,
+    });
+});
+
+const startServer = async () => {
+    return new Promise((resolve: any) => {
+        server.listen(port, resolve);
+    });
+};
+
+const stopServer = async () => {
+    return new Promise((resolve: any) => {
+        server.close(resolve);
+    });
+};
+
+describe('smoke test', () => {
+    beforeAll(startServer);
+
+    afterAll(stopServer);
+
+    it('should work', async () => {
+        console.log('going to the page in browser...');
+        await page.goto(uri);
+
+        console.log('waiting for fluence to connect...');
+        await page.waitForTimeout(2000);
+
+        console.log('clicking button...');
+        await page.click('#btn');
+
+        console.log('waiting for relay time to appear...');
+        const elem = await page.waitForSelector('#relayTime');
+
+        console.log('getting the content of relay time div...');
+        const content = await elem?.evaluate((x) => x.textContent);
+
+        expect(content?.length).toBeGreaterThan(10);
+    }, 15000);
+});

js-client-examples/browser-example/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

js-client-examples/browser-example/src/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+import { Fluence } from '@fluencelabs/js-client.api';
+import { randomKras } from '@fluencelabs/fluence-network-environment';
+
+const relayNode = randomKras();
+
+Fluence.connect(relayNode);
+
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root'),
+);

js-client-examples/browser-example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

js-client-examples/browser-example/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+  },
+  "include": [
+    "src"
+  ]
+}