add version to FidesJS at build time instead of runtime

CHANGELOG.md

@@ -20,6 +20,7 @@ The types of changes are:
 ### Added
 - Added DataHub integration config [#5401](https://github.com/ethyca/fides/pull/5401)
 - Added keepalive settings to the Redshift integration [#5433](https://github.com/ethyca/fides/pull/5433)
+- Added current version to the window.Fides object [#5435](https://github.com/ethyca/fides/pull/5435)
 
 ### Developer Experience
 - Added Carbon Icons to FidesUI [#5416](https://github.com/ethyca/fides/pull/5416)

clients/fides-js/docs/interfaces/Fides.md

@@ -343,3 +343,12 @@ preferences) or in the case when the previous consent is no longer valid.
 #### Returns
 
 `boolean`
+
+***
+
+### version?
+
+> `optional` **version**: `string`
+
+Returns the current version of FidesJS. This can be useful for debugging
+purposes, or for checking the version of FidesJS that is currently running.

clients/fides-js/package.json

@@ -46,6 +46,7 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-strip": "^3.0.4",
     "@types/base-64": "^1.0.2",
     "@types/jest": "^29.5.12",

clients/fides-js/rollup.config.mjs

@@ -9,6 +9,8 @@ import postcss from "rollup-plugin-postcss";
 import commonjs from "@rollup/plugin-commonjs";
 import { visualizer } from "rollup-plugin-visualizer";
 import strip from "@rollup/plugin-strip";
+import replace from "@rollup/plugin-replace";
+import pkg from "./package.json" assert { type: "json" };
 
 const NAME = "fides";
 const IS_DEV = process.env.NODE_ENV === "development";
@@ -19,6 +21,19 @@ const GZIP_SIZE_WARN_KB = 35; // log a warning if bundle size exceeds this
 const GZIP_SIZE_TCF_ERROR_KB = 85;
 const GZIP_SIZE_TCF_WARN_KB = 75;
 
+let PACKAGE_VERSION = "0.0.0";
+try {
+  PACKAGE_VERSION = pkg.version;
+  if (!PACKAGE_VERSION) {
+    throw new Error("No version found in package.json");
+  }
+  console.log(
+    `Starting FidesJS build and tagging with current version (Fides.version=${PACKAGE_VERSION})...`,
+  );
+} catch (e) {
+  console.error("🚨 Failed to get package version, defaulting to 0.0.0");
+}
+
 const preactAliases = {
   entries: [
     { find: "react", replacement: "preact/compat" },
@@ -93,6 +108,11 @@ const fidesScriptPlugins = ({ name, gzipWarnSizeKb, gzipErrorSizeKb }) => [
   visualizer({
     filename: `bundle-size-stats/${name}-stats.html`,
   }),
+  replace({
+    __FIDES_JS_VERSION_NUMBER__: PACKAGE_VERSION,
+    preventAssignment: true,
+    include: ["src/fides.ts", "src/fides-tcf.ts"],
+  }),
 ];
 
 const SCRIPTS = [

clients/fides-js/src/docs/fides.ts

@@ -263,6 +263,12 @@ export interface Fides {
    */
   shouldShowExperience: () => boolean;
 
+  /**
+   * Returns the current version of FidesJS. This can be useful for debugging
+   * purposes, or for checking the version of FidesJS that is currently running.
+   */
+  version?: string;
+
   /**
    * NOTE: The properties below are all marked @internal, despite being exported
    * on the global Fides object. This is because they are mostly implementation

clients/fides-js/src/fides-tcf.ts

@@ -70,6 +70,7 @@ declare global {
 const updateWindowFides = (fidesGlobal: FidesGlobal) => {
   if (typeof window !== "undefined") {
     window.Fides = fidesGlobal;
+    window.Fides.version = "__FIDES_JS_VERSION_NUMBER__";
   }
 };
 

clients/fides-js/src/fides.ts

@@ -53,6 +53,7 @@ declare global {
 const updateWindowFides = (fidesGlobal: FidesGlobal) => {
   if (typeof window !== "undefined") {
     window.Fides = fidesGlobal;
+    window.Fides.version = "__FIDES_JS_VERSION_NUMBER__";
   }
 };
 

clients/privacy-center/pages/api/fides-js.ts

@@ -21,8 +21,6 @@ import {
 import { LOCATION_HEADERS, lookupGeolocation } from "~/common/geolocation";
 import { safeLookupPropertyId } from "~/common/property-id";
 
-import * as npmPackage from "../../package.json";
-
 // one hour, how long the client should cache fides.js for
 const FIDES_JS_MAX_AGE_SECONDS = 60 * 60;
 // one hour, how long until the custom-fides.css is refreshed
@@ -113,7 +111,6 @@ export default async function handler(
   // Load the configured consent options (data uses, defaults, etc.) from environment
   const environment = await loadPrivacyCenterEnvironment();
   const serverSettings = await loadServerSettings();
-  const { version } = npmPackage;
 
   let options: ConsentOption[] = [];
   if (environment.config?.consent?.page.consentOptions) {
@@ -317,7 +314,6 @@ export default async function handler(
       : ""
   }
   window.Fides.config = ${fidesConfigJSON};
-  window.Fides.version = "${version}";
   ${skipInitialization ? "" : `window.Fides.init();`}
   ${
     environment.settings.DEBUG && skipInitialization