{"id":17561687,"url":"https://github.com/fluencelabs/js-client","last_synced_at":"2025-03-22T23:04:15.074Z","repository":{"id":38198904,"uuid":"323553046","full_name":"fluencelabs/js-client","owner":"fluencelabs","description":"JS Client to Fluence Network","archived":false,"fork":false,"pushed_at":"2024-09-23T16:10:45.000Z","size":9377,"stargazers_count":75,"open_issues_count":9,"forks_count":25,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-12T18:54:22.221Z","etag":null,"topics":["computation","fluence","fluence-js","javascript","p2p","sdk","typescript","wasm"],"latest_commit_sha":null,"homepage":"https://fluence.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluencelabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-22T07:25:59.000Z","updated_at":"2025-02-08T10:13:33.000Z","dependencies_parsed_at":"2023-12-07T10:30:14.247Z","dependency_job_id":"1364e0c3-c05c-49d9-a014-1bd66ea6052b","html_url":"https://github.com/fluencelabs/js-client","commit_stats":{"total_commits":401,"total_committers":19,"mean_commits":"21.105263157894736","dds":0.6758104738154613,"last_synced_commit":"e712d88019bc2be5f7517d236b39449c47dbffb5"},"previous_names":["fluencelabs/fluence-js"],"tags_count":260,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluencelabs%2Fjs-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluencelabs%2Fjs-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluencelabs%2Fjs-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluencelabs%2Fjs-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluencelabs","download_url":"https://codeload.github.com/fluencelabs/js-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244577673,"owners_count":20475345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computation","fluence","fluence-js","javascript","p2p","sdk","typescript","wasm"],"created_at":"2024-10-21T12:07:30.535Z","updated_at":"2025-03-22T23:04:15.056Z","avatar_url":"https://github.com/fluencelabs.png","language":"TypeScript","readme":"# Fluence JS Client\n\n[![js-client @ npm](https://img.shields.io/npm/v/@fluencelabs/js-client?label=@fluencelabs/js-client)](https://www.npmjs.com/package/@fluencelabs/js-client)\n\nThis is the Javascript client for the [Fluence](https://fluence.network) network. The main role of the JS client is to connect to the Fluence Network and allow you to integrate Aqua code into your application.\n\n## Installation\n\n\u003e JS Client only supports the ESM format that means not every Node.js project can install it.\n\u003e You can read more [here](https://nodejs.org/api/esm.html)\n\n1. Install the client:\n\n   ```bash\n   npm i @fluencelabs/js-client\n   ```\n\n2. Add the following lines at the beginning of your code:\n\n   ```javascript\n   import { Fluence, randomKras } from \"@fluencelabs/js-client\";\n\n   Fluence.connect(randomKras());\n   ```\n\n### HTML page\n\nAdd a script tag with the JS Client module to your `index.html`. The easiest way to do this is using a CDN (\nlike [JSDELIVR](https://www.jsdelivr.com/) or [UNPKG](https://unpkg.com/)).\n\nHere is an example using the JSDELIVR CDN:\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eCool App\u003c/title\u003e\n  \u003cscript type=\"module\"\u003e\n    import {\n      Fluence,\n      randomKras,\n    } from \"https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js\";\n\n    Fluence.connect(randomKras());\n  \u003c/script\u003e\n\u003c/head\u003e\n```\n\nIf you cannot or don't want to use a CDN, feel free to get the script directly from\nthe [npm package](https://www.npmjs.com/package/@fluencelabs/js-client) and host it yourself. You can find the script in\nthe `/dist/browser` directory of the package. (Note: this option means that developers understand what they are doing and know\nhow to serve this file from their own web server.)\n\n## Usage in an Application\n\nOnce you've added the client, you can compile [Aqua](https://github.com/fluencelabs/aqua) and run it in your application. To compile Aqua, use [Fluence CLI](https://github.com/fluencelabs/cli).\n\n1. Install the package:\n\n   ```bash\n   npm i -D @fluencelabs/cli\n   ```\n\n2. Add a directory in your project for Aqua code, e.g., `_aqua`.\n\n3. Put `*.aqua` files in that directory.\n\n4. Add a directory for compiled Aqua files inside your sources. For example, if your app source is located in the `src` directory, you can create `src/_aqua`.\n\n5. To compile Aqua code once, run `npx fluence aqua -i ./_aqua -o ./src/_aqua/`. To watch the changes and to recompile on the fly, add the `-w` flag: `npx fluence aqua -w -i ./_aqua -o ./src/_aqua/`.\n\n   **Hint**: it might be a good idea to add these scripts to your `package.json` file.\n   For example, you project structure could look like this:\n\n   ```\n    ┣ _aqua\n    ┃ ┗ demo.aqua\n    ┣ src\n    ┃ ┣ _aqua\n    ┃ ┃ ┗ demo.ts\n    ┃ ┗ index.ts\n    ┣ package-lock.json\n    ┣ package.json\n    ┗ tsconfig.json\n   ```\n\n   Then, your `package.json` file should include the following lines:\n\n   ```\n   {\n     ...\n     \"scripts\": {\n       ...\n       \"aqua:compile\": \"fluence aqua -i ./aqua/ -o ./src/_aqua\",\n       \"aqua:watch\": \"fluence aqua -w -i ./aqua/ -o ./src/_aqua\"\n     },\n     ...\n   }\n   ```\n\n6. Now you can import and call Aqua code from your application like\n   this:\n\n   ```javascript\n   import { getRelayTime } from \"./_aqua/demo\";\n\n   async function buttonClick() {\n     const time = await getRelayTime();\n     alert(\"relay time: \" + time);\n   }\n   ```\n\n## Debug\n\nJS Client uses the [debug](https://github.com/debug-js/debug) library under the hood for logging. The log namespaces are structured on a per-component basis, following this structure:\n\n```\nfluence:\u003ccomponent\u003e:trace\nfluence:\u003ccomponent\u003e:debug\nfluence:\u003ccomponent\u003e:error\n```\n\nMarine JS logs have a slightly different structure:\n\n```\nfluence:marine:\u003cservice id\u003e:trace\nfluence:marine:\u003cservice id\u003e:debug\nfluence:marine:\u003cservice id\u003e:info\nfluence:marine:\u003cservice id\u003e:warn\nfluence:marine:\u003cservice id\u003e:error\n```\n\nEach level corresponds to a logging level in Marine JS.\n\nStar (`*`) character can be used as a wildcard to enable logs for multiple components at once. For example, `DEBUG=fluence:*` will enable logs for all components. To exclude a component, use a minus sign before the component name. For example, `DEBUG=fluence:*,-fluence:particle:*`\n\n### Index of components:\n\n- `particle`: everything related to particle processing queue\n- `aqua`: infrastructure of aqua compiler support\n- `connection`: connection layer\n- `marine`: Marine JS logs\n\n### Enabling logs in Node.js\n\nEnable logs by passing the environment variable `DEBUG` with the corresponding log level. For example:\n\n```sh\nDEBUG=fluence:* node --loader ts-node/esm ./src/index.ts\n```\n\n### Enabling logs in the browser\n\nTo enable logs, set the `localStorage.debug` variable. For example:\n\n```javascript\nlocalStorage.debug = \"fluence:*\";\n```\n\n**NOTE**\n\nIn Chromium-based web browsers (e.g. Brave, Chrome, and Electron), the JavaScript console will be default—only to show\nmessages logged by debug if the \"Verbose\" log level is enabled.\n\n## Low level usage\n\nJS client also has an API for low level interaction with AVM and Marine JS.\nIt could be handy in advanced scenarios when a user fetches AIR dynamically or generates AIR without default Aqua compiler.\n\n`callAquaFunction` Allows to call aqua function without schema.\n\n`registerService` Gives an ability to register service without schema. Passed `service` could be\n\n- Plain object. In this case all function properties will be registered as AIR service functions.\n- Class instance. All class methods without inherited ones will be registered as AIR service functions.\n\n## Development\n\nTo hack on the Fluence JS Client itself, please refer to the [development page](./DEVELOPING.md).\n\n## Documentation\n\nThe starting point for all documentation related to Fluence is\n[fluence.dev](https://fluence.dev/). We also have an active [YouTube channel](https://www.youtube.com/@fluencelabs).\n\n## Support\n\nPlease, file an [issue](https://github.com/fluencelabs/js-client/issues) if you find a bug. You can also contact us at [Discord](https://discord.com/invite/5qSnPZKh7u) or [Telegram](https://t.me/fluence_project). We will do our best to resolve the issue ASAP.\n\n## Contributing\n\nAny interested person is welcome to contribute to the project. Please, make sure you read and follow some basic [rules](./CONTRIBUTING.md).\n\n## License\n\nAll software code is copyright (c) Fluence DAO, Inc. under the [Apache-2.0](./LICENSE) license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluencelabs%2Fjs-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluencelabs%2Fjs-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluencelabs%2Fjs-client/lists"}