diff --git a/fluence-js/3_in_depth.md b/fluence-js/3_in_depth.md index 4519292..1027a1e 100644 --- a/fluence-js/3_in_depth.md +++ b/fluence-js/3_in_depth.md @@ -527,3 +527,67 @@ sig.securityGuard = or( allowServiceFn("my_service", "my_function") ); ``` + +### Using Marine services in Fluence JS + +Fluence JS can host Marine services with Marine JS. Currently only pure single-module services are supported. + +Before registering the service corresponding WASM file must be loaded. Fluence JS package exports three helper functions for that. + +#### loadWasmFromFileSystem + +Loads the WASM file from file system. It accepts the path to the file and returns buffer compatible with `FluencePeer` API. + +This function can only be used in nodejs. Trying to call it inside browser will result throw an error. + +**loadWasmFromNpmPackage** + +Locates WASM file in the specified npm pacakge and loads it. The function accepts two arguments: + +* Name of npm package +* Path to WASM file relative to the npm package + +This function can only be used in nodejs. Trying to call it inside browser will result throw an error. + +#### loadWasmFromServer + +Loads WASM file from the service hosting the application. It accepts the file path on server and returns buffer compatible with `FluencePeer` API. + +{% hint style="info" %} +The function will try load file into SharedArrayBuffer if the site is cross-origin isolated. + +Otherwise the return value fall backs to Buffer which is less performant but is still compatible with `FluencePeer API`. + +We strongly recommend to set-up cross-origin headers. For more details see: See [MDN page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/SharedArrayBuffer#security\_requirements) for more info +{% endhint %} + +This function can only be used in browser. Trying to call it inside nodejs will result throw an error. + +### Registering services in FluencePeer + +After the file has been loaded it can be registered in `FluencePeer`. To do so use `registerMarineService function.` + +To remove service use `registerMarineService` function. + +You can pick any unique service id. Once the service has been registered it can be referred in aqua code by the specified id + +For example: + +```typescript +import { Fluence, loadWasmFromFileSystem } from '@fluencelabs/fluence'; + +async function main() + await Fluence.start({connectTo: relay}); + + const path = path.join(__dirname, './service.wasm'); + const service = await loadWasmFromFileSystem(path); + + // to register service + await Fluence.registerMarineService(service, 'my_service_id'); + + // to remove service + Fluence.removeMarineService('my_service_id'); +} +``` + +See [https://github.com/fluencelabs/marine-js-demo](https://github.com/fluencelabs/marine-js-demo) for a complete demo. diff --git a/fluence-js/4_run_in_browser-1.md b/fluence-js/4_run_in_browser-1.md index a36b31e..3636dc2 100644 --- a/fluence-js/4_run_in_browser-1.md +++ b/fluence-js/4_run_in_browser-1.md @@ -4,23 +4,38 @@ You can use the Fluence JS with any framework (or even without it). The "fluence ## Configuring application to run in browser -To run application in browser you need to configure the server which hosts the application to serve two additional files: +{% hint style="warning" %} +**Breaking change!**\ +****\ +****Starting from **v0.23.0** Fluence JS uses different file structure: -* `avm.wasm` is the execution file of AquaVM. The file is located in `@fluencelabs/avm` package -* `runnerScript.web.js` is the web worker script responsible for running AVM in background. The file is located in `@fluencelabs/avm-runner-background` package +* **copy-avm-public** script has been replaced with **copy-marine** +* **runnerScript.web.js** has been replaced with **`marine-js.web.js`** +* additional dependency added: **`marine-js.wasm`** -Fluence JS provides a utility script named `copy-avm-public` which locates described above files and copies them into the specified directory. For example if static files are served from the `public` directory you can run `copy-avm-public public` to copy files needed to run Fluence. It is recommended to put their names into `.gitignore` and run the script on every build to prevent possible inconsistencies with file versions. This can be done using npm's `postinstall` script: + + +Make sure to migrate when switching to **v0.23.0** +{% endhint %} + +To run application in browser you need to configure the server which hosts the application to serve Marine JS dependencies. Fluence JS provides a utility script named `copy-marine` which copies all the necessary files into specified folder. For example if static files are served from the `public` directory you can run `copy-marine public` to copy files needed to run Fluence. It is recommended to put their names into `.gitignore` and run the script on every build to prevent possible inconsistencies with file versions. This can be done using npm's `postinstall` script: ``` ... "scripts": { - "postinstall": "copy-avm-public public", + "postinstall": "copy-marine public", "start": "...", .. }, ... ``` +In case you want to distribute the files by hand here is the list of dependencies required to run Fluence: + +* `marine-js.wasm` is the Marine JS runtime. The file is located in `@fluencelabs/marine-js` package. +* `marine-js.web.js` is the web worker script responsible for running Marine JS in background. The file is located in `@fluencelabs/marine-js` package. +* `avm.wasm` is the AquaVM execution file. The file is located in `@fluencelabs/avm` package. + ## Demo applications See the browser-example which demonstrate integrating Fluence with React: [github](https://github.com/fluencelabs/examples/tree/main/fluence-js-examples/browser-example)