fix: report correct package version in the source code (#2566)

Author: MartinCupela

.releaserc.json

@@ -71,6 +71,10 @@
         }
       }
     ],
+    [
+      "@semantic-release/exec", {
+      "prepareCmd": "NEXT_VERSION=${nextRelease.version} npm run build"
+    }],
     [
       "@semantic-release/changelog",
       {

package.json

@@ -184,6 +184,7 @@
     "@ladle/react": "^0.16.0",
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.2",
+    "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
     "@stream-io/stream-chat-css": "^5.4.0",
@@ -221,6 +222,7 @@
     "dotenv": "^8.6.0",
     "emoji-mart": "^5.5.2",
     "esbuild": "^0.23.1",
+    "esbuild-plugin-replace": "^1.4.0",
     "eslint": "7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
@@ -260,7 +262,7 @@
     "typescript": "^5.4.5"
   },
   "scripts": {
-    "build": "rm -rf dist && ./scripts/copy-version.sh && yarn build-translations && yarn bundle",
+    "build": "rm -rf dist && yarn build-translations && yarn bundle",
     "bundle": "concurrently tsc ./scripts/copy-css.sh ./scripts/bundle.mjs",
     "build-translations": "i18next",
     "coverage": "jest --collectCoverage && codecov",

scripts/bundle.mjs

@@ -2,7 +2,9 @@
 
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { execSync } from 'node:child_process';
 import * as esbuild from 'esbuild';
+import { replace } from 'esbuild-plugin-replace';
 
 // import.meta.dirname is not available before Node 20
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -44,6 +46,28 @@ const cjsBundleConfig = {
   sourcemap: 'linked',
 };
 
+// Get the latest version so that magic string __STREAM_CHAT_REACT_VERSION__ can be replaced with it in the source code (used for reporting purposes)
+const getVersion = () => {
+    let version;
+    // During release, use the version being released
+    // see .releaserc.json where the `NEXT_VERSION` env variable is set
+    if (process.env.NEXT_VERSION) {
+        version = process.env.NEXT_VERSION;
+    } else {
+        // Otherwise use the latest git tag
+        try {
+            version = execSync('git describe --tags --abbrev=0').toString().trim();
+        } catch (error) {
+            console.error(error);
+            console.warn('Could not get latest version from git tags, falling back to package.json');
+            version = packageJson.default.version;
+        }
+    }
+    console.log(`Determined the build package version to be ${version}`);
+    return version;
+};
+
+
 // We build two CJS bundles: for browser and for node. The latter one can be
 // used e.g. during SSR (although it makes little sence to SSR chat, but still
 // nice for import not to break on server).
@@ -52,6 +76,11 @@ const bundles = ['browser', 'node'].map((platform) =>
     ...cjsBundleConfig,
     entryNames: `[dir]/[name].${platform}`,
     platform,
+    plugins: [
+        replace({
+          '__STREAM_CHAT_REACT_VERSION__': getVersion(),
+        }),
+    ],
   }),
 );
 await Promise.all(bundles);

scripts/copy-version.sh

@@ -12,8 +12,6 @@ import {
   getTestClientWithUser,
 } from '../../../mock-builders';
 
-import { version } from '../../../../package.json';
-
 const ChatContextConsumer = ({ fn }) => {
   fn(useContext(ChatContext));
   return <div data-testid='children' />;
@@ -66,7 +64,7 @@ describe('Chat', () => {
       expect(context.openMobileNav).toBeInstanceOf(Function);
       expect(context.closeMobileNav).toBeInstanceOf(Function);
       expect(context.client.getUserAgent()).toBe(
-        `stream-chat-react-${version}-${originalUserAgent}`,
+        `stream-chat-react-__STREAM_CHAT_REACT_VERSION__-${originalUserAgent}`,
       );
     });
   });

src/components/Chat/__tests__/Chat.test.js

@@ -7,7 +7,6 @@ import {
   Streami18n,
   SupportedTranslations,
 } from '../../../i18n';
-import { version } from '../../../version';
 
 import type { AppSettingsAPIResponse, Channel, Event, Mute, StreamChat } from 'stream-chat';
 
@@ -62,7 +61,8 @@ export const useChat = <
     const userAgent = client.getUserAgent();
     if (!userAgent.includes('stream-chat-react')) {
       // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'
-      client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);
+      // __STREAM_CHAT_REACT_VERSION__ is replaced during the build process with the current version
+      client.setUserAgent(`stream-chat-react-__STREAM_CHAT_REACT_VERSION__-${userAgent}`);
     }
 
     client.threads.registerSubscriptions();

src/components/Chat/hooks/useChat.ts

@@ -2233,6 +2233,18 @@
   resolved "https://registry.yarnpkg.com/@semantic-release/error/-/error-3.0.0.tgz#30a3b97bbb5844d695eb22f9d3aa40f6a92770c2"
   integrity sha512-5hiM4Un+tpl4cKw3lV4UgzJj+SmfNIDCLLw0TepzQxz9ZGV5ixnqkzIVF+3tp0ZHgcMKE+VNGHJjEeyFG2dcSw==
 
+"@semantic-release/exec@^6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@semantic-release/exec/-/exec-6.0.3.tgz#d212fdf19633bdfb553de6cb6c7f8781933224db"
+  integrity sha512-bxAq8vLOw76aV89vxxICecEa8jfaWwYITw6X74zzlO0mc/Bgieqx9kBRz9z96pHectiTAtsCwsQcUyLYWnp3VQ==
+  dependencies:
+    "@semantic-release/error" "^3.0.0"
+    aggregate-error "^3.0.0"
+    debug "^4.0.0"
+    execa "^5.0.0"
+    lodash "^4.17.4"
+    parse-json "^5.0.0"
+
 "@semantic-release/git@^10.0.1":
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/@semantic-release/git/-/git-10.0.1.tgz#c646e55d67fae623875bf3a06a634dd434904498"
@@ -5499,6 +5511,13 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.27.tgz#e99f8cdc63f1628747b63edd124d53cf7796468d"
   integrity sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw==
 
+esbuild-plugin-replace@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esbuild-plugin-replace/-/esbuild-plugin-replace-1.4.0.tgz#2051eb35e21699e41dcf75630f613bdaa5039be6"
+  integrity sha512-lP3ZAyzyRa5JXoOd59lJbRKNObtK8pJ/RO7o6vdjwLi71GfbL32NR22ZuS7/cLZkr10/L1lutoLma8E4DLngYg==
+  dependencies:
+    magic-string "^0.25.7"
+
 [email protected]:
   version "0.14.27"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.27.tgz#8611d825bcb8239c78d57452e83253a71942f45c"
@@ -8927,6 +8946,13 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
+magic-string@^0.25.7:
+  version "0.25.9"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
+  integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -12084,6 +12110,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+sourcemap-codec@^1.4.8:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"