fix(js-client): Fix CDN flow and move it in modules [fixes DXJ-527] (#376)

Akim · shamsartem · web-flow · commit f5e99239741b · 2023-11-10T21:29:49.000+07:00
* 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 &lt;shamsartem@gmail.com&gt;

* Minify es bundle

* Remove autocommit

* Fix lint

* Remove minimal

* Change nox version

* Change nox version

* Fix CDN

---------

Co-authored-by: shamsartem &lt;shamsartem@gmail.com&gt;
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
@@ -28,4 +28,4 @@ jobs:
     uses: ./.github/workflows/tests.yml
     with:
       ref: ${{ github.ref }}
-      nox-image: "fluencelabs/nox:unstable_minimal"
+      nox-image: "fluencelabs/nox:unstable"
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -6,7 +6,7 @@ on:
       nox-image:
         description: "nox image tag"
         type: string
-        default: "fluencelabs/nox:minimal_0.2.9"
+        default: "fluencelabs/nox:0.4.0"
       avm-version:
         description: "@fluencelabs/avm version"
         type: string
@@ -34,6 +34,9 @@ jobs:
       contents: read
       id-token: write
 
+    env:
+      LATEST_NODE_VERSION: 20.x
+
     strategy:
       matrix:
         node-version:
@@ -91,11 +94,8 @@ jobs:
       - run: pnpm -r i
       - run: pnpm -r build
 
-      - name: Lint code and fix all fixable errors
-        run: pnpm lint-fix
-
-      - name: Auto-commit
-        uses: stefanzweifel/git-auto-commit-action@v4
+      - name: Lint code
+        run: pnpm lint-check
 
       - name: Override dependencies
         uses: fluencelabs/github-actions/pnpm-set-dependency@main
diff --git a/README.md b/README.md
@@ -25,41 +25,34 @@ This is the Javascript client for the [Fluence](https://fluence.network) network
 
 ### HTML page
 
-Add a script tag with the JS Client bundle to your `index.html`. The easiest way to do this is using a CDN (
+Add a script tag with the JS Client module to your `index.html`. The easiest way to do this is using a CDN (
 like [JSDELIVR](https://www.jsdelivr.com/) or [UNPKG](https://unpkg.com/)).
 
 Here is an example using the JSDELIVR CDN:
 
 ```html
 <head>
   <title>Cool App</title>
-  <script src="https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js"></script>
+  <script
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js"
+  ></script>
+  <script type="module">
+    import {
+      Fluence,
+      randomKras,
+    } from "https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/browser/index.min.js";
+
+    Fluence.connect(randomKras());
+  </script>
 </head>
 ```
 
 If you cannot or don't want to use a CDN, feel free to get the script directly from
 the [npm package](https://www.npmjs.com/package/@fluencelabs/js-client) and host it yourself. You can find the script in
-the `/dist` directory of the package. (Note: this option means that developers understand what they are doing and know
+the `/dist/browser` directory of the package. (Note: this option means that developers understand what they are doing and know
 how to serve this file from their own web server.)
 
-After importing JS-client to HTML page the client is available as `window.Fluence` variable.
-To get a specific network you can peek at
-
-```
-https://cdn.jsdelivr.net/npm/@fluencelabs/js-client/dist/network.js
-```
-
-and hardcode selected network. So initialization would look like this
-
-```javascript
-// Passing 1 kras network config from ./dist/network.js above
-window.Fluence.connect({
-  multiaddr:
-    "/dns4/0-kras.fluence.dev/tcp/9000/wss/p2p/12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
-  peerId: "12D3KooWSD5PToNiLQwKDXsu8JSysCwUt8BVUJEqCHcDe7P5h45e",
-});
-```
-
 ## Usage in an Application
 
 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).
diff --git a/packages/@tests/smoke/web-cra-ts/public/index.html b/packages/@tests/smoke/web-cra-ts/public/index.html
@@ -7,8 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />
-    <!-- Ideally we want to use 'async' here. Currently, it's not supported. -->
-    <script src="js-client.min.js"></script>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/packages/@tests/smoke/web-cra-ts/test/index.ts b/packages/@tests/smoke/web-cra-ts/test/index.ts
@@ -17,7 +17,7 @@ const publicPath = join(__dirname, "../build/");
 
 const test = async () => {
   const localServer = await startContentServer(port, publicPath);
-  await createSymlinkIfNotExists(CDN_PUBLIC_PATH, join(publicPath, "source"));
+
   await createSymlinkIfNotExists(
     JS_CLIENT_DEPS_PATH,
     join(publicPath, "node_modules"),
diff --git a/packages/@tests/smoke/web/public/index.html b/packages/@tests/smoke/web/public/index.html
@@ -16,8 +16,9 @@ <h1>Open console f12</h1>
 
         <div id="res-placeholder"></div>
 
-        <script src="js-client.min.js"></script>
-        <script src="index.js"></script>
+        <!-- Importing js-client from local server that is used instead of the CDN -->
+        <script type="module" src="js-client.min.js"></script>
+        <script type="module" src="index.js"></script>
     </main>
 </body>
 
diff --git a/packages/@tests/smoke/web/public/index.js b/packages/@tests/smoke/web/public/index.js
@@ -1,8 +1,8 @@
-const fluence = globalThis.fluence;
+import { Fluence, callAquaFunction, randomStage } from "./js-client.min.js";
 
 const relay = {
   multiaddr:
-    "/ip4/127.0.0.1/tcp/9991/ws/p2p/12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
+      "/ip4/127.0.0.1/tcp/9991/ws/p2p/12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
   peerId: "12D3KooWBM3SdXWqGaawQDGQ6JprtwswEg3FWGvGhmgmMez1vRbR",
 };
 
@@ -74,18 +74,19 @@ const getRelayTime = () => {
   const config = {};
 
   const args = { relayPeerId: relay.peerId };
-  return fluence.callAquaFunction({
+
+  return callAquaFunction({
     args,
     def,
     script,
     config,
-    peer: fluence.defaultClient,
+    peer: Fluence.defaultClient,
   });
 };
 
 const main = async () => {
   console.log("starting fluence...");
-  fluence.defaultClient = await fluence.clientFactory(relay, {
+  await Fluence.connect(relay, {
     CDNUrl: "http://localhost:3000",
   });
   console.log("started fluence");
@@ -95,7 +96,7 @@ const main = async () => {
   console.log("got relay time, ", relayTime);
 
   console.log("stopping fluence...");
-  await fluence.defaultClient.stop();
+  await Fluence.disconnect();
   console.log("stopped fluence...");
 
   return relayTime;
diff --git a/packages/core/js-client/package.json b/packages/core/js-client/package.json
@@ -68,6 +68,7 @@
     "@types/debug": "4.1.7",
     "@types/node": "20.7.0",
     "@types/uuid": "8.3.2",
+    "esbuild": "0.19.5",
     "hotscript": "1.0.13",
     "vite": "4.4.11",
     "vite-tsconfig-paths": "4.0.3",
diff --git a/packages/core/js-client/src/index.ts b/packages/core/js-client/src/index.ts
@@ -176,16 +176,6 @@ export type {
 
 export { v5_callFunction, v5_registerService } from "./api.js";
 
-// @ts-expect-error Writing to global object like this prohibited by ts
-globalThis.new_fluence = Fluence;
-
-// @ts-expect-error Writing to global object like this prohibited by ts
-globalThis.fluence = {
-  clientFactory: createClient,
-  callAquaFunction,
-  registerService,
-};
-
 export { createClient, callAquaFunction, registerService };
 
 // Deprecated exports. Later they will be exposed only under js-client/keypair path
diff --git a/packages/core/js-client/vite.config.ts b/packages/core/js-client/vite.config.ts
@@ -17,11 +17,30 @@
 import inject from "@rollup/plugin-inject";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { createRequire } from "module";
-import { UserConfig } from "vite";
+import { PluginOption, UserConfig } from "vite";
+import { transform } from "esbuild";
 
 const require = createRequire(import.meta.url);
 const esbuildShim = require.resolve("node-stdlib-browser/helpers/esbuild/shim");
 
+function minifyEs(): PluginOption {
+  return {
+    name: "minifyEs",
+    renderChunk: {
+      order: "post",
+      async handler(code, chunk, outputOptions) {
+        if (
+          outputOptions.format === "es" &&
+          chunk.fileName.endsWith(".min.js")
+        ) {
+          return await transform(code, { minify: true });
+        }
+        return code;
+      },
+    },
+  };
+}
+
 const config: UserConfig = {
   build: {
     target: "modules",
@@ -30,7 +49,7 @@ const config: UserConfig = {
       entry: "./src/index.ts",
       name: "js-client",
       fileName: () => "index.min.js",
-      formats: ["umd"],
+      formats: ["es"],
     },
     outDir: "./dist/browser",
     rollupOptions: {
@@ -47,7 +66,7 @@ const config: UserConfig = {
       ],
     },
   },
-  plugins: [tsconfigPaths()],
+  plugins: [tsconfigPaths(), minifyEs()],
   optimizeDeps: {
     esbuildOptions: {
       define: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
