chore(js-client): Update and restructure examples [fixes DXJ-454] (#464)

* Update examples

* Update js-client examples

* Add cli to example

* Fixes

* Update js-client

* Update js-client version in js-client examples

* PR fixes

* Remove marine-js

* Update locks

* Fix aqua

* Remove unused import

* Adjust import

* Change code comment

* Update example structures

* Fix quickstart examples

* Add aqua command to README

* Add marine example

* Fix image links

* Fixes

* Misc fixes

js-client-examples/hello-world/src/aqua/hello-world.aqua

@@ -0,0 +1,18 @@
+import Peer from "@fluencelabs/aqua-lib/builtin.aqua"
+
+service HelloWorld("hello-world"):
+    hello(str: string)
+    getFortune() -> string
+
+func sayHello() -> string:
+    HelloWorld.hello("Hello, world!")
+    <- "OK"
+
+func tellFortune() -> string:
+    res <- HelloWorld.getFortune()
+    <- res
+
+func getRelayTime() -> u64:
+    on HOST_PEER_ID:
+        ts <- Peer.timestamp_ms()
+    <- ts

js-client-examples/hello-world/src/frontend/.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
+
+/dist
+
+# 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/compiled-aqua/*

js-client-examples/hello-world/src/frontend/.prettierrc.cjs

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

js-client-examples/hello-world/src/frontend/jest.config.cjs

@@ -0,0 +1,16 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    extensionsToTreatAsEsm: ['.ts'],
+    moduleNameMapper: {
+        '^(\\.{1,2}/.*)\\.js$': '$1',
+    },
+    testPathIgnorePatterns: ['dist'],
+    transform: {
+        '^.+\\.tsx?$': [
+            'ts-jest',
+            {
+                useESM: true,
+            },
+        ],
+    },
+};

js-client-examples/hello-world/src/frontend/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "hello-world",
+    "version": "1.0.0",
+    "description": "",
+    "type": "module",
+    "main": "index.js",
+    "scripts": {
+        "start": "node --loader ts-node/esm ./src/index.ts",
+        "build": "tsc",
+        "test": "jest"
+    },
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "ts-node": "10.9.1",
+        "typescript": "^4.6.3",
+        "@types/jest": "29.4.0",
+        "jest": "29.4.1",
+        "ts-jest": "29.0.5"
+    },
+    "dependencies": {
+        "@fluencelabs/js-client": "^0.5.4"
+    }
+}

js-client-examples/hello-world/src/frontend/src/main.ts

@@ -1,10 +1,9 @@
-import '@fluencelabs/js-client.node';
-import { Fluence } from '@fluencelabs/js-client.api';
-import { randomKras } from '@fluencelabs/fluence-network-environment';
-import { registerHelloWorld, sayHello, getRelayTime, tellFortune } from './_aqua/hello-world.js';
+import { Fluence } from '@fluencelabs/js-client';
+import relays from './relays.json' assert { type: "json" };
+import { registerHelloWorld, sayHello, getRelayTime, tellFortune } from './compiled-aqua/hello-world.js';
 
 export async function main() {
-    await Fluence.connect(randomKras());
+    await Fluence.connect(relays[0]);
 
     registerHelloWorld({
         hello: (str) => {

js-client-examples/hello-world/src/frontend/src/relays.json

@@ -0,0 +1,46 @@
+[
+  {
+    "multiaddr": "/dns4/0-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
+    "peerId": "12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e"
+  },
+  {
+    "multiaddr": "/dns4/1-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWR4cv1a8tv7pps4HH6wePNaK6gf1Hww5wcCMzeWxyNw51",
+    "peerId": "12D3KooWR4cv1a8tv7pps4HH6wePNaK6gf1Hww5wcCMzeWxyNw51"
+  },
+  {
+    "multiaddr": "/dns4/2-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWKnEqMfYo9zvfHmqTLpLdiHXPe4SVqUWcWHDJdFGrSmcA",
+    "peerId": "12D3KooWKnEqMfYo9zvfHmqTLpLdiHXPe4SVqUWcWHDJdFGrSmcA"
+  },
+  {
+    "multiaddr": "/dns4/3-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf",
+    "peerId": "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
+  },
+  {
+    "multiaddr": "/dns4/4-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWJd3HaMJ1rpLY1kQvcjRPEvnDwcXrH8mJvk7ypcZXqXGE",
+    "peerId": "12D3KooWJd3HaMJ1rpLY1kQvcjRPEvnDwcXrH8mJvk7ypcZXqXGE"
+  },
+  {
+    "multiaddr": "/dns4/5-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWFEwNWcHqi9rtsmDhsYcDbRUCDXH84RC4FW6UfsFWaoHi",
+    "peerId": "12D3KooWFEwNWcHqi9rtsmDhsYcDbRUCDXH84RC4FW6UfsFWaoHi"
+  },
+  {
+    "multiaddr": "/dns4/6-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWCMr9mU894i8JXAFqpgoFtx6qnV1LFPSfVc3Y34N4h4LS",
+    "peerId": "12D3KooWCMr9mU894i8JXAFqpgoFtx6qnV1LFPSfVc3Y34N4h4LS"
+  },
+  {
+    "multiaddr": "/dns4/7-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWDUszU2NeWyUVjCXhGEt1MoZrhvdmaQQwtZUriuGN1jTr",
+    "peerId": "12D3KooWDUszU2NeWyUVjCXhGEt1MoZrhvdmaQQwtZUriuGN1jTr"
+  },
+  {
+    "multiaddr": "/dns4/8-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWEFFCZnar1cUJQ3rMWjvPQg6yMV2aXWs2DkJNSRbduBWn",
+    "peerId": "12D3KooWEFFCZnar1cUJQ3rMWjvPQg6yMV2aXWs2DkJNSRbduBWn"
+  },
+  {
+    "multiaddr": "/dns4/9-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWFtf3rfCDAfWwt6oLZYZbDfn9Vn7bv7g6QjjQxUUEFVBt",
+    "peerId": "12D3KooWFtf3rfCDAfWwt6oLZYZbDfn9Vn7bv7g6QjjQxUUEFVBt"
+  },
+  {
+    "multiaddr": "/dns4/10-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWD7CvsYcpF9HE9CCV9aY3SJ317tkXVykjtZnht2EbzDPm",
+    "peerId": "12D3KooWD7CvsYcpF9HE9CCV9aY3SJ317tkXVykjtZnht2EbzDPm"
+  }
+]

js-client-examples/hello-world/src/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+        "lib": ["es2015", "dom"],
+        "outDir": "./dist/",
+        "target": "ESNext",
+        "module": "ESNext",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "declaration": true,
+        "declarationMap": false,
+        "sourceMap": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true
+    },
+    "exclude": ["node_modules", "dist"],
+    "include": ["src"]
+}