fix(design-system): don't break icons if process is not defined (#3525)

Author: AlexAndBear

packages/design-system/src/helpers/assets.spec.ts

@@ -0,0 +1,25 @@
+import { addVersionToAssetUrl } from './assets'
+
+describe('addVersionToAssetUrl', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.unstubAllEnvs()
+  })
+
+  it('adds the package version as query parameter', () => {
+    vi.stubEnv('PACKAGE_VERSION', '1.2.3')
+    expect(addVersionToAssetUrl('icons/foo.svg')).toBe('icons/foo.svg?v=1.2.3')
+  })
+  it('appends the package version to existing query parameters', () => {
+    vi.stubEnv('PACKAGE_VERSION', '1.2.3')
+    expect(addVersionToAssetUrl('icons/foo.svg?bar=1')).toBe('icons/foo.svg?bar=1&v=1.2.3')
+  })
+  it('returns the url unchanged if no package version is set', () => {
+    vi.stubEnv('PACKAGE_VERSION', '')
+    expect(addVersionToAssetUrl('icons/foo.svg')).toBe('icons/foo.svg')
+  })
+  it('returns the url unchanged if "process" is not defined', () => {
+    vi.stubGlobal('process', undefined)
+    expect(addVersionToAssetUrl('icons/foo.svg')).toBe('icons/foo.svg')
+  })
+})

packages/design-system/src/helpers/assets.ts

@@ -1,11 +1,20 @@
 // Vite injects this at build time
 declare const process: { env: { PACKAGE_VERSION?: string } }
 
+function getPackageVersion(): string | undefined {
+  try {
+    return process.env.PACKAGE_VERSION
+  } catch {
+    // `process` doesn't exist in the browser if the bundler doesn't inject the version (e.g. in the docs)
+    return undefined
+  }
+}
+
 /**
  * Adds version query parameter to asset URLs for cache busting
  */
 export const addVersionToAssetUrl = (url: string): string => {
-  const version = process.env.PACKAGE_VERSION
+  const version = getPackageVersion()
   if (!version) {
     return url
   }