From 8793721446b0d5007712957c4b03b437b5f0e2fa Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 16 Aug 2024 16:37:22 +0200 Subject: [PATCH 1/4] expose version via main entry --- packages/base/src/index.ts | 2 ++ packages/charts/src/index.ts | 2 ++ packages/compat/src/index.ts | 2 ++ packages/main/src/index.ts | 2 ++ 4 files changed, 8 insertions(+) diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 22f5ff132fa..bbd0e8ceded 100644 --- a/packages/base/src/index.ts +++ b/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; diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 83f33101786..bc0a185c767 100644 --- a/packages/charts/src/index.ts +++ b/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; diff --git a/packages/compat/src/index.ts b/packages/compat/src/index.ts index dae78941495..b86960742a1 100644 --- a/packages/compat/src/index.ts +++ b/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; diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index 142fe435c8f..084b7442268 100644 --- a/packages/main/src/index.ts +++ b/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; From 63e7b4aa054e12742b2307c37689e03484be23f9 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Mon, 19 Aug 2024 08:22:23 +0200 Subject: [PATCH 2/4] feat: register current runtime version in window Closes #6210 --- .../src/components/ThemeProvider/index.tsx | 34 ++++++++++++++++++- packages/main/src/internal/utils.ts | 15 ++++++++ 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index ad46dc5847b..31062096fae 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/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,26 @@ const ThemeProvider: FC = (props: ThemeProviderPropTypes }; }, []); + useEffect(() => { + if (_versionInfoInjected) { + return () => { + // noop + }; + } + 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 ( <> diff --git a/packages/main/src/internal/utils.ts b/packages/main/src/internal/utils.ts index 51f83d84f4c..b3cb42b9ccf 100644 --- a/packages/main/src/internal/utils.ts +++ b/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 = + /^(?0|[1-9]\d*)\.(?0|[1-9]\d*)\.(?0|[1-9]\d*)(?:-(?(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?[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 + }; +} From eb4dbd9f70ff4ce2c26dffefaa2192a869299340 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Mon, 19 Aug 2024 16:23:43 +0200 Subject: [PATCH 3/4] cleanup --- packages/main/src/internal/withWebComponent.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index 3828e79faf7..014b52830ac 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/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 = - /^(?0|[1-9]\d*)\.(?0|[1-9]\d*)\.(?0|[1-9]\d*)(?:-(?(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+(?[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 = , RefType = Ui eventProperties: string[], loader: () => Promise ) => { - 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((props, wcRef) => { From 224078f9865f2d34271140fd0e70c07a682a602c Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Mon, 19 Aug 2024 17:11:39 +0200 Subject: [PATCH 4/4] Update index.tsx --- packages/main/src/components/ThemeProvider/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index 31062096fae..7f11bc0c459 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/packages/main/src/components/ThemeProvider/index.tsx @@ -93,9 +93,7 @@ const ThemeProvider: FC = (props: ThemeProviderPropTypes useEffect(() => { if (_versionInfoInjected) { - return () => { - // noop - }; + return; } const versionInfo = getVersionInfo(); globalThis['@ui5/webcomponents-react'] ??= {};