feat: add query Parameters support to javascript websocket client

packages/components/src/components/QueryParamsVariables.js

@@ -65,23 +65,24 @@ const queryParamLogicConfig = {
     },
   },
   javascript: (param) => {
-    const paramName = param[0];
+    const rawName = param[0];
+    const paramName = toCamelCase(rawName);
     return {
       variableDefinition: {
-        text: `const ${paramName} = ${paramName} || process.env.${paramName.toUpperCase()};`,
-        indent: 8,
+        text: `const _${rawName} = ${paramName} || process.env.${rawName.toUpperCase()};`,
+        indent: 0,
       },
       ifCondition: {
-        text: `if (${paramName}) {`,
-        indent: 8,
+        text: `if (_${rawName}) {`,
+        indent: 0,
       },
       assignment: {
-        text: `params["${paramName}"] = ${paramName};`,
-        indent: 10,
+        text: `params["${rawName}"] = _${rawName};`,
+        indent: 2,
       },
       closing: {
         text: '}',
-        indent: 8,
+        indent: 0,
         newLines: 1,
       },
     };

packages/components/test/components/__snapshots__/QueryParamsVariables.test.js.snap

@@ -28,22 +28,22 @@ exports[`Testing of QueryParamsVariables component renders java quarkus query pa
 `;
 
 exports[`Testing of QueryParamsVariables component renders js query params correctly with query parameters 1`] = `
-"const heartbeat = heartbeat || process.env.HEARTBEAT;
-        if (heartbeat) {
-          params[\\"heartbeat\\"] = heartbeat;
-        }
-        const top_of_book = top_of_book || process.env.TOP_OF_BOOK;
-        if (top_of_book) {
-          params[\\"top_of_book\\"] = top_of_book;
-        }
-        const bids = bids || process.env.BIDS;
-        if (bids) {
-          params[\\"bids\\"] = bids;
-        }
-        const offers = offers || process.env.OFFERS;
-        if (offers) {
-          params[\\"offers\\"] = offers;
-        }"
+"const _heartbeat = heartbeat || process.env.HEARTBEAT;
+if (_heartbeat) {
+  params[\\"heartbeat\\"] = _heartbeat;
+}
+const _top_of_book = topOfBook || process.env.TOP_OF_BOOK;
+if (_top_of_book) {
+  params[\\"top_of_book\\"] = _top_of_book;
+}
+const _bids = bids || process.env.BIDS;
+if (_bids) {
+  params[\\"bids\\"] = _bids;
+}
+const _offers = offers || process.env.OFFERS;
+if (_offers) {
+  params[\\"offers\\"] = _offers;
+}"
 `;
 
 exports[`Testing of QueryParamsVariables component renders python nothing when queryParams is null 1`] = `""`;

packages/templates/clients/websocket/javascript/components/ClientClass.js

@@ -5,13 +5,13 @@ import { ModuleExport } from './ModuleExport';
 import { CompileOperationSchemas } from './CompileOperationSchemas';
 import { RegisterOutgoingProcessor } from './RegisterOutgoingProcessor';
 
-export function ClientClass({ clientName, serverUrl, title, sendOperations }) {
+export function ClientClass({ clientName, serverUrl, queryParams, title, sendOperations }) {
   return (
     <Text>
       <Text newLines={2}>
         {`class ${clientName} {`}
       </Text>
-      <Constructor serverUrl={serverUrl} sendOperations={sendOperations} />
+      <Constructor serverUrl={serverUrl} queryParams={queryParams} sendOperations={sendOperations} />
       <Connect language="javascript" title={title} />
       <RegisterMessageHandler 
         language="javascript" 

packages/templates/clients/websocket/javascript/components/Constructor.js

@@ -1,33 +1,52 @@
 import { Text } from '@asyncapi/generator-react-sdk';
+import { QueryParamsVariables } from '@asyncapi/generator-components';
+import { InitSignature } from './InitSignature';
+import { QueryParamsArgumentsDocs } from './QueryParamsArgumentsDocs';
 
-export function Constructor({ serverUrl, sendOperations }) {
+export function Constructor({ serverUrl, queryParams, sendOperations }) {
   const sendOperationsId = sendOperations.map((operation) => operation.id());
   const sendOperationsArray = JSON.stringify(sendOperationsId);
+  const queryParamsArray = queryParams && Array.from(queryParams.entries());
 
   return (
     <Text indent={2}>
-      {
-        `/*
+      {`/*
   * Constructor to initialize the WebSocket client
   * @param {string} url - The WebSocket server URL. Use it if the server URL is different from the default one taken from the AsyncAPI document.
-  * @param {boolean} [throwSendErrors=true] - Controls how the instance send methods react to a send failure.
+`}
+      <QueryParamsArgumentsDocs queryParams={queryParamsArray} />
+      {`  * @param {boolean} [throwSendErrors=true] - Controls how the instance send methods react to a send failure.
   *   When true (default) the error is re-thrown after the registered error handlers run, so the caller can
   *   handle each failure. When false the error is suppressed after the handlers run, which keeps a
   *   high-throughput producer loop going.
 */
-constructor(url, throwSendErrors = true) {
-  this.url = url || '${serverUrl}';
-  this.websocket = null;
-  this.messageHandlers = [];
-  this.errorHandlers = [];
-  this.outgoingProcessors = [];
-  this.compiledSchemas = {};
-  this.schemasCompiled = false;
-  this.sendOperationsId = ${sendOperationsArray};
-  this.throwSendErrors = throwSendErrors; // Re-throw send failures after handlers run
+`}
+      <InitSignature queryParams={queryParamsArray} />
+      <Text indent={2} newLines={1}>
+        {`this.url = url || '${serverUrl}';
+`}
+        {queryParamsArray && queryParamsArray.length > 0 && (
+          <Text>
+            {`const params = {};
+`}
+            <QueryParamsVariables language="javascript" queryParams={queryParamsArray} />
+            {`const queryString = querystring.stringify(params);
+if (queryString) {
+  this.url += '?' + queryString;
 }
-`
-      }
+`}
+          </Text>
+        )}
+        {`this.websocket = null;
+this.messageHandlers = [];
+this.errorHandlers = [];
+this.outgoingProcessors = [];
+this.compiledSchemas = {};
+this.schemasCompiled = false;
+this.sendOperationsId = ${sendOperationsArray};
+this.throwSendErrors = throwSendErrors; // Re-throw send failures after handlers run`}
+      </Text>
+      {'}'}
     </Text>
   );
 }

packages/templates/clients/websocket/javascript/components/InitSignature.js

@@ -0,0 +1,44 @@
+import { Text } from '@asyncapi/generator-react-sdk';
+import { getSafeJSName } from './getSafeJsName';
+
+/**
+ * Renders the constructor signature for the generated WebSocket client.
+ * Injects any query parameters into the signature with their default values (if provided in the AsyncAPI document).
+ *
+ * @param {Object} props - The component props.
+ * @param {Array<Array<string>>} [props.queryParams] - Array of query parameters from the AsyncAPI document, where each item is a tuple `[name, defaultValue]`.
+ * @returns {React.Element} The rendered React SDK Text element containing the constructor signature.
+ */
+export function InitSignature({ queryParams }) {
+  if (!queryParams || queryParams.length === 0) {
+    return (
+      <Text indent={0}>
+        {'constructor(url, throwSendErrors = true) {'}
+      </Text>
+    );
+  }
+
+  const usedNames = new Set();
+  const queryParamsArguments = queryParams.map((param) => {
+    const paramName = getSafeJSName(param[0], usedNames);
+    const paramDefaultValue = param[1];
+    let defaultValue = '';
+    if (paramDefaultValue !== undefined && paramDefaultValue !== null && paramDefaultValue !== '') {
+      const isBoolean = paramDefaultValue === 'true' || paramDefaultValue === 'false' || typeof paramDefaultValue === 'boolean';
+      const isNumber = typeof paramDefaultValue === 'number' || (!isNaN(parseFloat(paramDefaultValue)) && isFinite(paramDefaultValue));
+
+      if (isBoolean || isNumber) {
+        defaultValue = ` = ${paramDefaultValue}`;
+      } else {
+        defaultValue = ` = "${paramDefaultValue}"`;
+      }
+    }
+    return `${paramName}${defaultValue}`;
+  }).join(', ');
+
+  return (
+    <Text indent={0}>
+      {`constructor(url, ${queryParamsArguments}, throwSendErrors = true) {`}
+    </Text>
+  );
+}

packages/templates/clients/websocket/javascript/components/QueryParamsArgumentsDocs.js

@@ -0,0 +1,30 @@
+import { Text } from '@asyncapi/generator-react-sdk';
+import { getSafeJSName } from './getSafeJsName';
+
+/**
+ * Generates the JSDoc `@param` documentation blocks for each query parameter
+ * injected into the constructor signature.
+ *
+ * @param {Object} props - The component props.
+ * @param {Array<Array<string>>} [props.queryParams] - Array of query parameters from the AsyncAPI document, where each item is a tuple `[name, defaultValue]`.
+ * @returns {React.Element[] | null} An array of rendered React SDK Text elements containing the parameter documentation, or null if no query parameters exist.
+ */
+export function QueryParamsArgumentsDocs({ queryParams }) {
+  if (!queryParams || queryParams.length === 0) {
+    return null;
+  }
+
+  const usedNames = new Set();
+  return queryParams.map((param) => {
+    const originalParamName = param[0];
+    const paramName = getSafeJSName(originalParamName, usedNames);
+    const envVarName = originalParamName.toUpperCase().replace(/[^A-Z0-9_]/g, '_');
+    const firstLine = `* @param {string} ${paramName} - `;
+    const secondLine = `If provided (or if ${envVarName} environment variable is set), added as ?${originalParamName}=… to URL`;
+    return (
+      <Text indent={2}>
+        {`${firstLine}${secondLine}\n`}
+      </Text>
+    );
+  });
+}

packages/templates/clients/websocket/javascript/components/getSafeJsName.js

@@ -0,0 +1,29 @@
+import { toCamelCase } from '@asyncapi/generator-helpers';
+
+/**
+ * Converts a given string into a safe JavaScript identifier.
+ * It camelCases the string, replaces invalid characters, ensures it does not start with a digit,
+ * and avoids collisions with reserved words (including specific constructor parameters).
+ *
+ * @param {string} name - The original string (e.g., a query parameter name).
+ * @param {Set<string>} [usedNames=new Set()] - A set of already used names to prevent collisions.
+ * @returns {string} A safe JavaScript identifier.
+ */
+export function getSafeJSName(name, usedNames = new Set()) {
+  let safe = toCamelCase(name);
+  safe = safe.replace(/[^a-zA-Z0-9_]/g, '_');
+  if ((/^[0-9]/).test(safe)) {
+    safe = `_${safe}`;
+  }
+  const reserved = ['url', 'throwSendErrors', 'params', 'queryString', 'class', 'const', 'let', 'var', 'if', 'else', 'return', 'this', 'true', 'false', 'null', 'undefined'];
+  if (reserved.includes(safe)) safe = `_${safe}`;
+
+  let candidate = safe;
+  let suffix = 1;
+  while (usedNames.has(candidate)) {
+    candidate = `${safe}_${suffix++}`;
+  }
+  usedNames.add(candidate);
+
+  return candidate;
+}

packages/templates/clients/websocket/javascript/example-slack.js

@@ -0,0 +1,27 @@
+const WSClient = require('./test/temp/snapshotTestResult/client_slack/client.js');
+// Example usage
+const wsClient = new WSClient();
+
+// Example of how custom message handler that operates on incoming messages can look like
+function myHandler(message) {
+  console.log('====================');
+  console.log('\x1b[94mIncoming event from Slack\x1b[0m:', message);
+  console.log('====================');
+}
+
+async function main() {
+  wsClient.registerMessageHandler(myHandler);
+
+  try {
+    await wsClient.connect();
+
+    // Keep the process alive to receive Slack events
+    // The connection will stay open until you terminate the process
+    console.log('Listening for Slack events... Press Ctrl+C to exit.');
+    await new Promise(() => {});
+  } catch (error) {
+    console.error('Failed to connect to WebSocket:', error.message);
+  }
+}
+
+main();

packages/templates/clients/websocket/javascript/template/client.js.js

@@ -1,5 +1,5 @@
 import { File } from '@asyncapi/generator-react-sdk';
-import { getClientName, getServerUrl, getServer, getInfo, getTitle } from '@asyncapi/generator-helpers';
+import { getClientName, getServerUrl, getServer, getInfo, getTitle, getQueryParams } from '@asyncapi/generator-helpers';
 import { FileHeaderInfo, DependencyProvider } from '@asyncapi/generator-components';
 import { ClientClass } from '../components/ClientClass';
 
@@ -11,6 +11,13 @@ export default function ({ asyncapi, params }) {
   const serverUrl = getServerUrl(server);
   const sendOperations = asyncapi.operations().filterBySend();
   const asyncapiFilepath = `${params.asyncapiFileDir}/asyncapi.yaml`;
+  const queryParams = getQueryParams(asyncapi.channels());
+
+  const dependencies = ['const path = require(\'path\');', `const asyncapiFilepath = path.resolve(__dirname, '${asyncapiFilepath}');`];
+  if (queryParams) {
+    dependencies.push('const querystring = require(\'querystring\');');
+  }
+
   return (
     <File name={params.clientFileName}>
       <FileHeaderInfo
@@ -20,9 +27,9 @@ export default function ({ asyncapi, params }) {
       />
       <DependencyProvider
         language="javascript"
-        additionalDependencies={['const path = require(\'path\');', `const asyncapiFilepath = path.resolve(__dirname, '${asyncapiFilepath}');`]}
+        additionalDependencies={dependencies}
       />
-      <ClientClass clientName={clientName} serverUrl={serverUrl} title={title} sendOperations={sendOperations} />
+      <ClientClass clientName={clientName} serverUrl={serverUrl} queryParams={queryParams} title={title} sendOperations={sendOperations} />
     </File>
   );
 }