feat: register current runtime version in window (#6222)

Closes #6210

Author: MarcusNotheis

packages/base/src/index.ts

@@ -1,3 +1,4 @@
+import pkgJson from '../package.json';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
 import { I18nStore } from './stores/I18nStore.js';
@@ -9,3 +10,4 @@ export * from './utils/index.js';
 export * from './hooks/index.js';
 
 export { I18nStore, StyleStore, ThemingParameters, Device, hooks };
+export const version = pkgJson.version;

packages/charts/src/index.ts

@@ -1,3 +1,4 @@
+import pkgJson from '../package.json';
 import { BarChart } from './components/BarChart/BarChart.js';
 import { BarChartPlaceholder } from './components/BarChart/Placeholder.js';
 import { BulletChart } from './components/BulletChart/BulletChart.js';
@@ -47,3 +48,4 @@ export {
   ColumnChartWithTrendPlaceholder,
   TimelineChartPlaceholder
 };
+export const version = pkgJson.version;

packages/compat/src/index.ts

@@ -1,3 +1,4 @@
+import pkgJson from '../package.json';
 export * from './components/Loader/index.js';
 export * from './components/OverflowToolbarButton/index.js';
 export * from './components/OverflowToolbarToggleButton/index.js';
@@ -13,3 +14,4 @@ export * from './components/ToolbarSpacer/index.js';
 export { LoaderType } from './enums/LoaderType.js';
 export { ToolbarDesign } from './enums/ToolbarDesign.js';
 export { ToolbarStyle } from './enums/ToolbarStyle.js';
+export const version = pkgJson.version;

packages/main/src/components/ThemeProvider/index.tsx

@@ -7,9 +7,21 @@ import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
 import { I18nStore, StyleStore, useIsomorphicLayoutEffect, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { FC, ReactNode } from 'react';
-import { useId } from 'react';
+import { useEffect, useId } from 'react';
+import pkgJson from '../../../package.json';
+import { parseSemVer } from '../../internal/utils.js';
 import { styleData } from './ThemeProvider.css.js';
 
+let _versionInfo = null;
+let _versionInfoInjected = false;
+
+function getVersionInfo() {
+  if (!_versionInfo) {
+    _versionInfo = parseSemVer(pkgJson.version);
+  }
+  return _versionInfo;
+}
+
 function ThemeProviderStyles() {
   const uniqueId = useId();
   useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`);
@@ -79,6 +91,24 @@ const ThemeProvider: FC<ThemeProviderPropTypes> = (props: ThemeProviderPropTypes
     };
   }, []);
 
+  useEffect(() => {
+    if (_versionInfoInjected) {
+      return;
+    }
+    const versionInfo = getVersionInfo();
+    globalThis['@ui5/webcomponents-react'] ??= {};
+    globalThis['@ui5/webcomponents-react'].Runtimes ??= [];
+
+    globalThis['@ui5/webcomponents-react'].Runtimes.push(versionInfo);
+    _versionInfoInjected = true;
+    return () => {
+      globalThis['@ui5/webcomponents-react'].Runtimes = globalThis['@ui5/webcomponents-react'].Runtimes.filter(
+        (info) => info !== versionInfo
+      );
+      _versionInfoInjected = false;
+    };
+  }, []);
+
   return (
     <>
       <ThemeProviderStyles />

packages/main/src/index.ts

@@ -1,3 +1,4 @@
+import pkgJson from '../package.json';
 import * as AnalyticalTableHooks from './components/AnalyticalTable/pluginHooks/AnalyticalTableHooks.js';
 
 export * from './components/ActionSheet/index.js';
@@ -37,3 +38,4 @@ export type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode, Nullable }
 export * from './webComponents/index.js';
 
 export { AnalyticalTableHooks };
+export const version = pkgJson.version;

packages/main/src/internal/utils.ts

@@ -55,3 +55,18 @@ export function getTagNameWithoutScopingSuffix(tagName) {
   const tagNameSuffix = getCustomElementsScopingSuffix();
   return tagNameSuffix ? tagName.replace(`-${tagNameSuffix.toUpperCase()}`, '') : tagName;
 }
+
+const SEMVER_REGEX =
+  /^(?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+
+export function parseSemVer(version: string) {
+  const parsed = SEMVER_REGEX.exec(version).groups;
+  return {
+    version,
+    major: parseInt(parsed.major),
+    minor: parseInt(parsed.minor),
+    patch: parseInt(parsed.patch),
+    prerelease: parsed.prerelease,
+    buildMetadata: parsed.buildmetadata
+  };
+}

packages/main/src/internal/withWebComponent.tsx

@@ -6,10 +6,7 @@ import type { ComponentType, ReactElement, ReactNode, Ref } from 'react';
 import { cloneElement, forwardRef, Fragment, isValidElement, useEffect, useState, version } from 'react';
 import type { CommonProps, Ui5DomRef } from '../types/index.js';
 import { useServerSideEffect } from './ssr.js';
-import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase } from './utils.js';
-
-const SEMVER_REGEX =
-  /^(?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?<buildmetadata>[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+import { camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, parseSemVer } from './utils.js';
 
 const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`;
 
@@ -38,8 +35,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
   eventProperties: string[],
   loader: () => Promise<unknown>
 ) => {
-  const reactMajorVersion = SEMVER_REGEX.exec(version)?.groups?.major;
-  const webComponentsSupported = parseInt(reactMajorVersion) >= 19;
+  const webComponentsSupported = parseSemVer(version).major >= 19;
   // displayName will be assigned in the individual files
   // eslint-disable-next-line react/display-name
   return forwardRef<RefType, Props & WithWebComponentPropTypes>((props, wcRef) => {