feat: include version in global config

package.json

@@ -37,6 +37,7 @@
     "@esri/calcite-colors": "6.1.0",
     "@prettier/sync": "0.5.2",
     "@rollup/plugin-node-resolve": "15.2.3",
+    "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-typescript": "11.1.6",
     "@storybook/addon-a11y": "8.0.9",
     "@storybook/addon-controls": "8.0.9",

packages/calcite-components/src/utils/config.spec.ts

@@ -1,12 +1,10 @@
-import type { CalciteConfig } from "./config";
-
 describe("config", () => {
-  let config: CalciteConfig;
+  let config: typeof import("./config");
 
   /**
    * Need to load the config at runtime to allow test to specify custom configuration if needed.
    */
-  async function loadConfig(): Promise<CalciteConfig> {
+  async function loadConfig(): Promise<typeof import("./config")> {
     return import("./config");
   }
 
@@ -28,4 +26,29 @@ describe("config", () => {
 
     expect(config.focusTrapStack).toBe(customFocusTrapStack);
   });
+
+  describe("stampVersion", () => {
+    const calciteVersionPreBuildPlaceholder = "__CALCITE_VERSION__";
+
+    it("creates global config and stamps the version onto it", async () => {
+      config = await loadConfig();
+      config.stampVersion();
+      expect(globalThis.calciteConfig.version).toBe(calciteVersionPreBuildPlaceholder);
+    });
+
+    it("stamps the version onto existing config if there's no version present", async () => {
+      globalThis.calciteConfig = {};
+      config = await loadConfig();
+      config.stampVersion();
+      expect(globalThis.calciteConfig.version).toBe(calciteVersionPreBuildPlaceholder);
+    });
+
+    it("warns if the version is already set", async () => {
+      globalThis.calciteConfig = { version: "1.33.7" };
+      config = await loadConfig();
+      const warnSpy = jest.spyOn(console, "warn");
+      config.stampVersion();
+      expect(warnSpy).toHaveBeenCalled();
+    });
+  });
 });

packages/calcite-components/src/utils/config.ts

@@ -13,8 +13,38 @@ export interface CalciteConfig {
    * @see https://github.com/focus-trap/focus-trap#createoptions
    */
   focusTrapStack: FocusTrap[];
+
+  /**
+   * Contains the version of the Calcite components.
+   *
+   * @readonly
+   */
+  version?: string;
 }
 
 const customConfig: CalciteConfig = globalThis["calciteConfig"];
 
 export const focusTrapStack: FocusTrap[] = customConfig?.focusTrapStack || [];
+
+const version = "__CALCITE_VERSION__"; // version number is set by build
+
+/**
+ * Stamp the version onto the global config.
+ */
+export function stampVersion(): void {
+  if (customConfig && customConfig.version) {
+    console.warn(
+      `[calcite-components] while initializing v${version}, an existing configuration with version "${customConfig.version}" was found. This may cause unexpected behavior. The version will not be added to the existing global configuration.`,
+    );
+    return;
+  }
+
+  const target = customConfig || globalThis["calciteConfig"] || {};
+
+  Object.defineProperty(target, "version", {
+    value: version,
+    writable: false,
+  });
+
+  globalThis["calciteConfig"] = target;
+}

packages/calcite-components/src/utils/globalScript.ts

@@ -1,4 +1,5 @@
 import { initModeChangeEvent } from "./mode";
+import { stampVersion } from "./config";
 
 /**
  * This file is imported in Stencil's `globalScript` config option.
@@ -20,4 +21,6 @@ export default function (): void {
       document.addEventListener("DOMContentLoaded", () => initModeChangeEvent(), { once: true });
     }
   }
+
+  stampVersion();
 }

packages/calcite-components/stencil.config.ts

@@ -6,6 +6,7 @@ import { reactOutputTarget } from "@stencil/react-output-target";
 import { angularOutputTarget } from "@stencil/angular-output-target";
 import tailwindcss, { Config as TailwindConfig } from "tailwindcss";
 import stylelint from "stylelint";
+import replace from "@rollup/plugin-replace";
 import tailwindConfig from "./tailwind.config";
 import { generatePreactTypes } from "./support/preact";
 import { version } from "./package.json";
@@ -141,6 +142,17 @@ export const create: () => Config = () => ({
       ],
     }),
   ],
+  rollupPlugins: {
+    before: [
+      replace({
+        values: {
+          __CALCITE_VERSION__: version,
+        },
+        include: ["src/utils/config.ts"],
+        preventAssignment: true,
+      }),
+    ],
+  },
   testing: {
     watchPathIgnorePatterns: ["<rootDir>/../../node_modules", "<rootDir>/dist", "<rootDir>/www", "<rootDir>/hydrate"],
     moduleNameMapper: {