Skip to content
This repository was archived by the owner on Jul 10, 2025. It is now read-only.

Commit f5e9923

Browse files
Akimshamsartem
Akim
and
shamsartem
authored
fix(js-client): Fix CDN flow and move it in modules [fixes DXJ-527] (#376)
* Use type module in html * Fix autocommit * Try fix template * Try fix template * Try fix template * Try fix template * Try fix template * Fix test * Update packages/@tests/smoke/web/public/index.html Co-authored-by: shamsartem <[email protected]> * Minify es bundle * Remove autocommit * Fix lint * Remove minimal * Change nox version * Change nox version * Fix CDN --------- Co-authored-by: shamsartem <[email protected]>
1 parent 1803d83 commit f5e9923

File tree

11 files changed

+322
-54
lines changed

11 files changed

+322
-54
lines changed

‎.github/workflows/run-tests.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,4 @@ jobs:
2828
uses: ./.github/workflows/tests.yml
2929
with:
3030
ref: ${{ github.ref }}
31-
nox-image: "fluencelabs/nox:unstable_minimal"
31+
nox-image: "fluencelabs/nox:unstable"

‎.github/workflows/tests.yml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ on:
66
nox-image:
77
description: "nox image tag"
88
type: string
9-
default: "fluencelabs/nox:minimal_0.2.9"
9+
default: "fluencelabs/nox:0.4.0"
1010
avm-version:
1111
description: "@fluencelabs/avm version"
1212
type: string
@@ -34,6 +34,9 @@ jobs:
3434
contents: read
3535
id-token: write
3636

37+
env:
38+
LATEST_NODE_VERSION: 20.x
39+
3740
strategy:
3841
matrix:
3942
node-version:
@@ -91,11 +94,8 @@ jobs:
9194
- run: pnpm -r i
9295
- run: pnpm -r build
9396

94-
- name: Lint code and fix all fixable errors
95-
run: pnpm lint-fix
96-
97-
- name: Auto-commit
98-
uses: stefanzweifel/git-auto-commit-action@v4
97+
- name: Lint code
98+
run: pnpm lint-check
9999

100100
- name: Override dependencies
101101
uses: fluencelabs/github-actions/pnpm-set-dependency@main

‎README.md

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,41 +25,34 @@ This is the Javascript client for the [Fluence](https://fluence.network) network
2525

2626
### HTML page
2727

28-
Add a script tag with the JS Client bundle to your `index.html`. The easiest way to do this is using a CDN (
28+
Add a script tag with the JS Client module to your `index.html`. The easiest way to do this is using a CDN (
2929
like [JSDELIVR](https://www.jsdelivr.com/) or [UNPKG](https://unpkg.com/)).
3030

3131
Here is an example using the JSDELIVR CDN:
3232

3333
```html
3434
<head>
3535
<title>Cool App</title>
36-
<script src="https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js"></script>
36+
<script
37+
type="module"
38+
src="https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js"
39+
></script>
40+
<script type="module">
41+
import {
42+
Fluence,
43+
randomKras,
44+
} from "https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js";
45+
46+
Fluence.connect(randomKras());
47+
</script>
3748
</head>
3849
```
3950

4051
If you cannot or don't want to use a CDN, feel free to get the script directly from
4152
the [npm package](https://www.npmjs.com/package/@fluencelabs/js-client) and host it yourself. You can find the script in
42-
the `/dist` directory of the package. (Note: this option means that developers understand what they are doing and know
53+
the `/dist/browser` directory of the package. (Note: this option means that developers understand what they are doing and know
4354
how to serve this file from their own web server.)
4455

45-
After importing JS-client to HTML page the client is available as `window.Fluence` variable.
46-
To get a specific network you can peek at
47-
48-
```
49-
https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/network.js
50-
```
51-
52-
and hardcode selected network. So initialization would look like this
53-
54-
```javascript
55-
// Passing 1 kras network config from ./dist/network.js above
56-
window.Fluence.connect({
57-
multiaddr:
58-
"/dns4/0-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
59-
peerId: "12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
60-
});
61-
```
62-
6356
## Usage in an Application
6457

6558
Once 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).

‎packages/@tests/smoke/web-cra-ts/public/index.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#000000" />
99
<meta name="description" content="Web site created using create-react-app" />
10-
<!-- Ideally we want to use 'async' here. Currently, it's not supported. -->
11-
<script src="js-client.min.js"></script>
1210
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1311
<!--
1412
manifest.json provides metadata used when your web app is installed on a

‎packages/@tests/smoke/web-cra-ts/test/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const publicPath = join(__dirname, "../build/");
1717

1818
const test = async () => {
1919
const localServer = await startContentServer(port, publicPath);
20-
await createSymlinkIfNotExists(CDN_PUBLIC_PATH, join(publicPath, "source"));
20+
2121
await createSymlinkIfNotExists(
2222
JS_CLIENT_DEPS_PATH,
2323
join(publicPath, "node_modules"),

‎packages/@tests/smoke/web/public/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ <h1>Open console f12</h1>
1616

1717
<div id="res-placeholder"></div>
1818

19-
<script src="js-client.min.js"></script>
20-
<script src="index.js"></script>
19+
<!-- Importing js-client from local server that is used instead of the CDN -->
20+
<script type="module" src="js-client.min.js"></script>
21+
<script type="module" src="index.js"></script>
2122
</main>
2223
</body>
2324

‎packages/@tests/smoke/web/public/index.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
const fluence = globalThis.fluence;
1+
import { Fluence, callAquaFunction, randomStage } from "./js-client.min.js";
22

33
const relay = {
44
multiaddr:
5-
"/ip4/127.0.0.1/tcp/9991/ws/p2p/12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
5+
"/ip4/127.0.0.1/tcp/9991/ws/p2p/12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
66
peerId: "12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
77
};
88

@@ -74,18 +74,19 @@ const getRelayTime = () => {
7474
const config = {};
7575

7676
const args = { relayPeerId: relay.peerId };
77-
return fluence.callAquaFunction({
77+
78+
return callAquaFunction({
7879
args,
7980
def,
8081
script,
8182
config,
82-
peer: fluence.defaultClient,
83+
peer: Fluence.defaultClient,
8384
});
8485
};
8586

8687
const main = async () => {
8788
console.log("starting fluence...");
88-
fluence.defaultClient = await fluence.clientFactory(relay, {
89+
await Fluence.connect(relay, {
8990
CDNUrl: "http://localhost:3000",
9091
});
9192
console.log("started fluence");
@@ -95,7 +96,7 @@ const main = async () => {
9596
console.log("got relay time, ", relayTime);
9697

9798
console.log("stopping fluence...");
98-
await fluence.defaultClient.stop();
99+
await Fluence.disconnect();
99100
console.log("stopped fluence...");
100101

101102
return relayTime;

‎packages/core/js-client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
"@types/debug": "4.1.7",
6969
"@types/node": "20.7.0",
7070
"@types/uuid": "8.3.2",
71+
"esbuild": "0.19.5",
7172
"hotscript": "1.0.13",
7273
"vite": "4.4.11",
7374
"vite-tsconfig-paths": "4.0.3",

‎packages/core/js-client/src/index.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -176,16 +176,6 @@ export type {
176176

177177
export { v5_callFunction, v5_registerService } from "./api.js";
178178

179-
// @ts-expect-error Writing to global object like this prohibited by ts
180-
globalThis.new_fluence = Fluence;
181-
182-
// @ts-expect-error Writing to global object like this prohibited by ts
183-
globalThis.fluence = {
184-
clientFactory: createClient,
185-
callAquaFunction,
186-
registerService,
187-
};
188-
189179
export { createClient, callAquaFunction, registerService };
190180

191181
// Deprecated exports. Later they will be exposed only under js-client/keypair path

‎packages/core/js-client/vite.config.ts

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,30 @@
1717
import inject from "@rollup/plugin-inject";
1818
import tsconfigPaths from "vite-tsconfig-paths";
1919
import { createRequire } from "module";
20-
import { UserConfig } from "vite";
20+
import { PluginOption, UserConfig } from "vite";
21+
import { transform } from "esbuild";
2122

2223
const require = createRequire(import.meta.url);
2324
const esbuildShim = require.resolve("node-stdlib-browser/helpers/esbuild/shim");
2425

26+
function minifyEs(): PluginOption {
27+
return {
28+
name: "minifyEs",
29+
renderChunk: {
30+
order: "post",
31+
async handler(code, chunk, outputOptions) {
32+
if (
33+
outputOptions.format === "es" &&
34+
chunk.fileName.endsWith(".min.js")
35+
) {
36+
return await transform(code, { minify: true });
37+
}
38+
return code;
39+
},
40+
},
41+
};
42+
}
43+
2544
const config: UserConfig = {
2645
build: {
2746
target: "modules",
@@ -30,7 +49,7 @@ const config: UserConfig = {
3049
entry: "./src/index.ts",
3150
name: "js-client",
3251
fileName: () => "index.min.js",
33-
formats: ["umd"],
52+
formats: ["es"],
3453
},
3554
outDir: "./dist/browser",
3655
rollupOptions: {
@@ -47,7 +66,7 @@ const config: UserConfig = {
4766
],
4867
},
4968
},
50-
plugins: [tsconfigPaths()],
69+
plugins: [tsconfigPaths(), minifyEs()],
5170
optimizeDeps: {
5271
esbuildOptions: {
5372
define: {

0 commit comments

Comments
 (0)