fix(base): mark base package as type: module (#4140)

Author: MarcusNotheis

docs/Welcome.mdx

@@ -124,8 +124,7 @@ UI5 Web Components and UI5 Web Components for React are both coming with the `sa
   children={
     <>
       UI5 Web Components for React uses the theme configuration of UI5 Web Components. Please also have a look at their{' '}
-      <Link href="https://sap.github.io/ui5-webcomponents/playground/advanced/configuration/#theme">documentation</Link>
-      .
+      <Link href="https://sap.github.io/ui5-webcomponents/playground/advanced/configuration/#theme">documentation</Link>.
     </>
   }
 />

packages/base/package.json

@@ -2,9 +2,20 @@
   "name": "@ui5/webcomponents-react-base",
   "version": "1.13.1",
   "description": "Base for ui5-webcomponents-react",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./dist": "./dist/index.js",
+    "./dist/*": "./dist/*",
+    "./dist/*.js": "./dist/*.js"
+  },
   "homepage": "https://sap.github.io/ui5-webcomponents-react",
   "repository": {
     "type": "git",

packages/base/src/Device/Media.ts

@@ -1,5 +1,5 @@
 import UI5MediaRange from '@ui5/webcomponents-base/dist/MediaRange.js';
-import { MediaEventProvider, RANGE_LEGACY_4_STEPS, RangeInfo } from './EventProvider';
+import { MediaEventProvider, RANGE_LEGACY_4_STEPS, RangeInfo } from './EventProvider.js';
 
 type RANGE_4_STEPS = 'S' | 'M' | 'L' | 'XL';
 

packages/base/src/Device/index.ts

@@ -1,5 +1,5 @@
 import { supportsTouch } from '@ui5/webcomponents-base/dist/Device.js';
-import { IOrientation, IWindowSize, OrientationEventProvider, ResizeEventProvider } from './EventProvider';
+import { IOrientation, IWindowSize, OrientationEventProvider, ResizeEventProvider } from './EventProvider.js';
 
 const isSSR = () => typeof window === 'undefined';
 
@@ -165,7 +165,7 @@ const handleResizeEvent = () => {
 // re-export everything from the web components device
 export * from '@ui5/webcomponents-base/dist/Device.js';
 // export all media methods
-export { attachMediaHandler, detachMediaHandler, getCurrentRange } from './Media';
+export { attachMediaHandler, detachMediaHandler, getCurrentRange } from './Media.js';
 
 // resize events
 export const attachResizeHandler = (fnFunction: (windowSize: IWindowSize) => void): void => {

packages/base/src/context/I18nContext.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
+import type I18nBundle from '@ui5/webcomponents-base/dist/i18nBundle.js';
 import { createContext, useContext } from 'react';
 
 export const I18nContext = createContext<{

packages/base/src/hooks/index.ts

@@ -1,11 +1,11 @@
-import { useCurrentTheme } from './useCurrentTheme';
-import { useI18nBundle } from './useI18nBundle';
-import { useIsomorphicId } from './useIsomorphicId';
-import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-import { useIsRTL } from './useIsRTL';
-import { useResponsiveContentPadding } from './useResponsiveContentPadding';
-import { useSyncRef } from './useSyncRef';
-import { useViewportRange } from './useViewportRange';
+import { useCurrentTheme } from './useCurrentTheme.js';
+import { useI18nBundle } from './useI18nBundle.js';
+import { useIsomorphicId } from './useIsomorphicId.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+import { useIsRTL } from './useIsRTL.js';
+import { useResponsiveContentPadding } from './useResponsiveContentPadding.js';
+import { useSyncRef } from './useSyncRef.js';
+import { useViewportRange } from './useViewportRange.js';
 
 export {
   useI18nBundle,

packages/base/src/hooks/useI18nBundle.ts

@@ -2,8 +2,8 @@
 
 import I18nBundle, { getI18nBundle } from '@ui5/webcomponents-base/dist/i18nBundle.js';
 import { useRef } from 'react';
-import { useI18nContext } from '../context/I18nContext';
-import { useIsomorphicLayoutEffect } from '../hooks';
+import { useI18nContext } from '../context/I18nContext.js';
+import { useIsomorphicLayoutEffect } from '../hooks/index.js';
 
 const defaultBundle = new I18nBundle('defaultBundle');
 

packages/base/src/hooks/useIsRTL.ts

@@ -2,7 +2,7 @@
 
 import { getRTL } from '@ui5/webcomponents-base/dist/config/RTL.js';
 import { RefObject, useRef, useState } from 'react';
-import { useIsomorphicLayoutEffect } from '../hooks';
+import { useIsomorphicLayoutEffect } from '../hooks/index.js';
 
 const GLOBAL_DIR_CSS_VAR = '--_ui5_dir';
 

packages/base/src/hooks/useIsomorphicId.ts

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import * as React from 'react';
 
 function getRandomId() {
   if ('randomUUID' in crypto) {
@@ -17,6 +17,6 @@ export function useIsomorphicId(): string {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const localId = useRef(getRandomId()); // React version never changes at runtime
+  const localId = React.useRef(getRandomId()); // React version never changes at runtime
   return localId.current;
 }

packages/base/src/hooks/useResponsiveContentPadding.ts

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-import { getCurrentRange } from '../Device';
+import { getCurrentRange } from '../Device/index.js';
 
 type Range = 'Phone' | 'Tablet' | 'Desktop' | 'LargeDesktop';
 

packages/base/src/hooks/useViewportRange.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { getCurrentRange, attachMediaHandler, detachMediaHandler } from '../Device';
+import { getCurrentRange, attachMediaHandler, detachMediaHandler } from '../Device/index.js';
 
 export const useViewportRange = () => {
   const [currentRange, setCurrentRange] = useState(getCurrentRange()?.name);

packages/base/src/index.ts

@@ -1,11 +1,11 @@
-import { getI18nContext, I18nContext } from './context/I18nContext';
-import * as Device from './Device';
-import * as hooks from './hooks';
-import * as spacing from './styling/spacing';
-import { ThemingParameters } from './styling/ThemingParameters';
+import { getI18nContext, I18nContext } from './context/I18nContext.js';
+import * as Device from './Device/index.js';
+import * as hooks from './hooks/index.js';
+import * as spacing from './styling/spacing.js';
+import { ThemingParameters } from './styling/ThemingParameters.js';
 
-export * from './styling/CssSizeVariables';
-export * from './utils/index';
-export * from './hooks';
+export * from './styling/CssSizeVariables.js';
+export * from './utils/index.js';
+export * from './hooks/index.js';
 
 export { getI18nContext, I18nContext, ThemingParameters, Device, hooks, spacing };

packages/base/src/utils/index.ts

@@ -31,5 +31,5 @@ export const enrichEventWithDetails = <T extends Record<string, unknown>, Return
   return event as unknown as ReturnType;
 };
 
-export { debounce } from './debounce';
-export { throttle } from './throttle';
+export { debounce } from './debounce.js';
+export { throttle } from './throttle.js';

packages/base/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16",
     "baseUrl": ".",
     "outDir": "./dist",
     "declarationDir": "./dist",