feat: Update Libp2p to latest version. Add standalone bundled JS Client (#239)

packages/client/js-client.web.standalone/.gitignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+bundle/
+tmp/
+
+dist
+esm
+types
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+.idea

packages/client/js-client.web.standalone/.prettierignore

@@ -0,0 +1 @@
+/dist/

packages/client/js-client.web.standalone/README.md

@@ -0,0 +1,11 @@
+# JS Client web
+
+This package is a part of FluenceJS, the official implementation of the Fluence Peer in typescript. See the [FluenceJS repo](https://github.com/fluencelabs/fluence-js) for more info
+
+## Contributing
+
+While the project is still in the early stages of development, you are welcome to track progress and contribute. As the project is undergoing rapid changes, interested contributors should contact the team before embarking on larger pieces of work. All contributors should consult with and agree to our [basic contributing rules](CONTRIBUTING.md).
+
+## License
+
+[Apache 2.0](LICENSE)

packages/client/js-client.web.standalone/build.ts

@@ -0,0 +1,126 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { fromUint8Array } from 'js-base64';
+import { build } from 'vite';
+import { createRequire } from 'module';
+import type { InlineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import * as inject from '@rollup/plugin-inject';
+import { replaceCodePlugin } from 'vite-plugin-replace';
+
+const require = createRequire(import.meta.url);
+
+const getWorkerScriptPathOrDie = () => {
+    const scriptPath = path.resolve('../../core/dist/marine/worker-script/index.js');
+    if (!fs.existsSync(scriptPath)) {
+        console.error();
+        process.exit(1);
+    }
+
+    return scriptPath;
+};
+
+const commonConfig = (opts: {
+    outDir: string;
+    name: string;
+    entry: string;
+}): InlineConfig & Required<Pick<InlineConfig, 'build'>> => {
+    return {
+        mode: 'production',
+        build: {
+            minify: 'esbuild',
+            lib: {
+                entry: opts.entry,
+                name: opts.name,
+                fileName: opts.name,
+            },
+            outDir: opts.outDir,
+        },
+        base: '',
+        plugins: [tsconfigPaths()],
+        optimizeDeps: {
+            esbuildOptions: {
+                define: {
+                    global: 'globalThis',
+                },
+            },
+        },
+    };
+};
+
+const readAsBase64 = async (filePath: string): Promise<string> => {
+    const scriptRaw = await fs.promises.readFile(filePath);
+    const b64 = fromUint8Array(scriptRaw);
+    return b64;
+};
+
+const readWasmFromNpmAsBase64 = (pkg: string, wasmFileName: string): Promise<string> => {
+    const pkgPath = require.resolve(pkg);
+    const wasmFilePath = path.join(path.dirname(pkgPath), wasmFileName);
+    return readAsBase64(wasmFilePath);
+};
+
+const buildClient = async () => {
+    await fs.promises.mkdir('tmp', { recursive: true });
+
+    // build worker script
+    const workerConfig = commonConfig({
+        outDir: './tmp',
+        entry: getWorkerScriptPathOrDie(),
+        name: 'worker-script',
+    });
+    workerConfig.build!.rollupOptions = {
+        plugins: [
+            inject.default({
+                Buffer: ['buffer', 'Buffer'],
+                process: 'process',
+            }),
+        ],
+    };
+
+    await build(workerConfig);
+
+    // build js-client
+    const jsClientConfig = commonConfig({
+        outDir: './dist',
+        entry: './src/index.ts',
+        name: 'js-client',
+    });
+
+    const workerScriptB64 = await readAsBase64('./tmp/worker-script.umd.cjs');
+    const avmBase64 = await readWasmFromNpmAsBase64('@fluencelabs/avm', 'avm.wasm');
+    const marineBase64 = await readWasmFromNpmAsBase64('@fluencelabs/marine-js', 'marine-js.wasm');
+
+    jsClientConfig.plugins!.push(
+        replaceCodePlugin({
+            replacements: [
+                {
+                    from: '___worker___',
+                    to: workerScriptB64,
+                },
+                {
+                    from: '___avm___',
+                    to: avmBase64,
+                },
+                {
+                    from: '___marine___',
+                    to: marineBase64,
+                },
+            ],
+        }),
+    );
+
+    await build(jsClientConfig);
+
+    // We should exclude the script with type=module because
+    // - it might be confusing (i.e won't work in browsers that do not support ESM, or if you miss the `type` attribute)
+    // - there is a problem when using `self.crypto` in web workers
+    await fs.promises.rm('./dist/js-client.js');
+
+    // browsers don't understand `.cjs` extensions, just use `.js`
+    await fs.promises.rename('./dist/js-client.umd.cjs', './dist/js-client.min.js');
+};
+
+buildClient()
+    .then(() => console.log('Built successfully'))
+    .catch((err) => console.error('failed', err));

packages/client/js-client.web.standalone/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "@fluencelabs/js-client.web.standalone",
+    "version": "0.1.0",
+    "description": "TypeScript implementation of Fluence Peer",
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "engines": {
+        "node": ">=10",
+        "pnpm": ">=3"
+    },
+    "type": "module",
+    "scripts": {
+        "build": "node --loader ts-node/esm ./build.ts"
+    },
+    "repository": "https://github.com/fluencelabs/fluence-js",
+    "author": "Fluence Labs",
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@fluencelabs/js-peer": "workspace:*",
+        "buffer": "6.0.3",
+        "process": "0.11.10"
+    },
+    "devDependencies": {
+        "@fluencelabs/avm": "0.35.3",
+        "@fluencelabs/marine-js": "0.3.42",
+        "@types/node": "16.11.59",
+        "@types/jest": "28.1.0",
+        "jest": "28.1.0",
+        "ts-jest": "28.0.2",
+        "js-base64": "3.7.2",
+        "@rollup/plugin-inject": "5.0.3",
+        "vite-plugin-replace": "0.1.1",
+        "vite": "4.0.4",
+        "vite-tsconfig-paths": "4.0.3"
+    },
+    "peerDependencies": {
+        "esbuild": "0.16.7"
+    }
+}

packages/client/js-client.web.standalone/src/index.ts

@@ -0,0 +1,35 @@
+import { FluencePeer } from '@fluencelabs/js-peer/dist/js-peer/FluencePeer';
+import { MarineBasedAvmRunner } from '@fluencelabs/js-peer/dist/js-peer/avm';
+import { MarineBackgroundRunner } from '@fluencelabs/js-peer/dist/marine/worker';
+import { checkConnection, marineLogFunction } from '@fluencelabs/js-peer/dist/js-peer/utils';
+import { InlinedWorkerLoader, InlinedWasmLoader } from '@fluencelabs/js-peer/dist/marine/deps-loader/common';
+
+export const makeDefaultPeer = () => {
+    const workerLoader = new InlinedWorkerLoader('___worker___');
+    const controlModuleLoader = new InlinedWasmLoader('___marine___');
+    const avmModuleLoader = new InlinedWasmLoader('___avm___');
+
+    const marine = new MarineBackgroundRunner(workerLoader, controlModuleLoader, marineLogFunction);
+    const avm = new MarineBasedAvmRunner(marine, avmModuleLoader, undefined);
+    return new FluencePeer(marine, avm);
+};
+
+// @ts-ignore
+globalThis.defaultPeer = makeDefaultPeer();
+
+// TODO! remove after implementing smoke test (DXJ-253)
+// @ts-ignore
+window.demo = async () => {
+    // @ts-ignore
+    const peer: FluencePeer = globalThis.defaultPeer;
+
+    await peer.start({
+        connectTo: {
+            multiaddr: '/ip4/127.0.0.1/tcp/4310/ws/p2p/12D3KooWKEprYXUXqoV5xSBeyqrWLpQLLH4PXfvVkDJtmcqmh5V3',
+            peerId: '12D3KooWKEprYXUXqoV5xSBeyqrWLpQLLH4PXfvVkDJtmcqmh5V3',
+        },
+    });
+
+    const res = await checkConnection(peer);
+    console.log('Check connection res', res);
+};

packages/client/js-client.web.standalone/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "moduleResolution": "node"
+    },
+    "exclude": ["node_modules", "dist"]
+}