feat: introduce JS SDK (not part of CI yet).

GitOrigin-RevId: 936312f5f913130f496089a17ce353810e520c86

Author: wnederhof

sdk/js/README.md

@@ -9,93 +9,39 @@ When you want the user to be able to record a session, you basically want to cal
 - Start the recording (and, more specifically, all queries in the template)
 - Stop the recording
 
-In order to be able to start a frontend recording, you need to install `rrweb` and `rrweb-snapshot`.
-
-Currently, there is no SDK available for the frontend. Nevertheless, it is very easy to integrate the frontend
-with WireQuery using a few simple `fetch` commands and using `rrweb`.
-
-## Start Recording
-
-A recording can be started by calling the `recordings` endpoint from WireQuery.
-
-```
-const res = await fetch("<WireQuery Host>/api/v1/recordings", {
-  method: "POST",
-  headers: {
-    "Content-Type": "application/json",
-  },
-  body: JSON.stringify({
-    templateId: <templateId>,
-    apiKey: <apiKey>,
-    args: {
-      <template args>
-    },
-  }),
-})
-
-const recording = await res.json()
-
-```
-
-Here, the `<templateId>` has to be set to the Template id mentioned earlier. The api key needs to be set
-to the api key of the template, which can be found by clicking on Details when on a Template page.
-The args need to contain the parameters of that template, such as the `accountId`. For example:
-
-```
-const res = fetch("https://demo.wirequery.io/api/v1/recordings", {
-  method: "POST",
-  headers: {
-    "Content-Type": "application/json",
-  },
-  body: JSON.stringify({
-    templateId: 1,
-    apiKey: 'api-key',
-    args: {
-      accountId
-    },
-  }),
-})
-
-const recording = await res.json()
+## Installation
+Install the required libraries:
+```bash
+npm install rrweb rrweb-snapshot @wirequery/wirequery-js-core
 ```
 
 ## Recording
+To start recording, create a RecorderClass and call `startRecoding`:
+```ts
+const wireQueryBackendPath = 'http://localhost:8080';
 
-The actual recording needs to be taken care by `rrweb`. A guide on `rrweb` can be found on
-[GitHub](https://github.com/rrweb-io/rrweb/blob/master/guide.md), and an example can be found
-in the [Shop](https://github.com/wirequery/wirequery/tree/main/sdk/js/examples/shop) example.
+const url = '';
+const templateId = '';
+const apiKey = '';
 
-## Finish Recording
+const recorder = new RecorderClass(url, templateId, apiKey)
 
-Similarly, when a recording is finished, a call to WireQuery needs to be made as well to send and finalize the
-recording.
+// start recording
 
-When the recording is finished, the following call needs to be made:
+recorder
+    .startRecording({ accountId: '123' })
+    .then(() => {
+        // ...
+    })
 
 ```
-fetch(`<WireQuery Host>/api/v1/recordings/${recording.id}/finish`, {
-  method: "POST",
-  headers: {
-    "Content-Type": "application/json",
-  },
-  body: JSON.stringify({
-    secret: recording.secret,
-    recording: JSON.stringify(events),
-    context: {},
-  }),
-});
-```
-
-Where `events` represent `rrweb` events and `<WireQuery Host>` is the host of WireQuery, such
-as `https://demo.wirequery.io`.
+To end recording, call `recorder.stopRecording()`:
+```js
+// end recording
+recorder.stopRecording()
+    .then(() => {
+        // ...
+    })
 
-An example of how `rrweb` can be used, can be found in the `sdk/js/examples/shop` in
-the [WireQuery](https://github.com/wirequery/wirequery) repository.
-
-## Examples
-
-The following examples demonstrate how WireQuery can be used within a Frontend application:
-
-- [Shop](https://github.com/wirequery/wirequery/tree/main/sdk/js/examples/shop) - simulates a webshop.
-    - [Products Service](https://github.com/wirequery/wirequery/tree/main/sdk/jvm/examples/spring-boot/products) - simulates a product catalogue.
-    - [Basket](https://github.com/wirequery/wirequery/tree/main/sdk/jvm/examples/spring-boot/basket) - simulates an order basket. Connects to the products service.
+```
+The API Key is the API Key belonging to the specified template.

sdk/js/examples/shop/package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@wirequery/wirequery-js-core": "0.0.4",
     "@mantine/core": "^7.1.5",
     "@mantine/hooks": "^7.1.5",
     "@next/font": "13.5.5",

sdk/js/examples/shop/package.json

@@ -5,69 +5,38 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { getRecordNetworkPlugin } from "@/replay/rrwebRecord";
-import { Affix, rem } from "@mantine/core";
-import { useState } from "react";
-import { getRecordConsolePlugin, record } from "rrweb";
+import {Affix, rem} from "@mantine/core";
+import {useState} from "react";
+import {Recorder as RecorderClass} from "@wirequery/wirequery-js-core";
 
-const events: any = [];
 const wireQueryBackendPath = 'http://localhost:8080';
 
-export const Recorder = () => {
-  const [recording, setRecording] = useState<any | undefined>(undefined)
+const recorder = new RecorderClass(wireQueryBackendPath, 1, '1/f2e74d68-f70e-48bd-94dc-ce889f612d73')
 
-  const start = () => {
-    const destructor = startRecording()
-    return () => destructor?.();
-  };
+export const Recorder = () => {
+    const [recording, setRecording] = useState<any | undefined>(undefined)
 
-  const startRecording = () => {
-    fetch(`${wireQueryBackendPath}/api/v1/recordings`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        templateId: 1, // Debug Session by Account Id
-        apiKey: '1/f2e74d68-f70e-48bd-94dc-ce889f612d73',
-        args: {
-          accountId: "123",
-        },
-      }),
-    }).then((res) => res.json().then((json) => {
-      (window as any).recordingCorrelationId = json.correlationId
-      setRecording(json);
-    }));
-    return record({
-      emit: (event) => {
-        events.push(event);
-      },
-      plugins: [getRecordConsolePlugin(), getRecordNetworkPlugin({ recordHeaders: true })],
-    });
-  };
+    const start = () => {
+        recorder
+            .startRecording({ accountId: '123' })
+            .then(() => {
+                setRecording(true) })
+    };
 
-  const send = () => {
-    if (recording) {
-      setRecording(undefined);
-      fetch(`${wireQueryBackendPath}/api/v1/recordings/${recording.id}/finish`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          secret: recording.secret,
-          recording: JSON.stringify(events),
-          context: {},
-        }),
-      });
-    }
-  };
+    const send = () => {
+        if (recording) {
+            recorder.stopRecording()
+                .then(() => {
+                    setRecording(false)
+                })
+        }
+    };
 
-  return (
-    <Affix position={{ bottom: 0, right: rem(20) }}>
-      {recording
-        ? <button onClick={send}>Done</button>
-        : <button onClick={start}>Start Recording</button>}
-    </Affix>
-  );
+    return (
+        <Affix position={{bottom: 0, right: rem(20)}}>
+            {recording
+                ? <button onClick={send}>Done</button>
+                : <button onClick={start}>Start Recording</button>}
+        </Affix>
+    );
 };