chore: remove dedicated SSR build (#6253)

BREAKING CHANGE: the dedicated build for Server Side Rendering in the `ssr` folder has been removed as the UI5 Web Components now natively support being imported in Node.js environments. You can import all components from `@ui5/webcomponents-react`.

Author: MarcusNotheis

.eslintignore

@@ -10,7 +10,6 @@ packages/cli/dist
 
 # build results for main package
 packages/main/dist
-packages/main/ssr
 packages/main/wrappers
 
 # i18n defaults

package.json

@@ -10,7 +10,7 @@
     "start:watcher": "lerna run watch:css",
     "start:storybook": "storybook dev -p 6006",
     "setup": "lerna run build:i18n && lerna run build:css && lerna run build:css-bundle && rimraf node_modules/@types/mocha",
-    "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper && lerna run build:ssr",
+    "build": "yarn setup && tsc --build tsconfig.build.json && lerna run build:client && lerna run build:wrapper",
     "build:storybook": "lerna run build:i18n && yarn create-cypress-commands-docs && storybook build -o .out",
     "build:storybook-sitemap": "node ./scripts/create-storybook-sitemap.js --directory .out",
     "test:prepare": "rimraf temp && lerna run build",

packages/cli/src/scripts/create-wrappers/ComponentRenderer.ts

@@ -7,7 +7,6 @@ import { WebComponentWrapper } from './WebComponentWrapper.js';
 export class ComponentRenderer extends AbstractRenderer {
   public phase = RenderingPhase.component;
 
-  private dynamicImportPath: string | undefined;
   private attributes: CEM.ClassField[] = [];
   private slots: CEM.Slot[] = [];
   private events: CEM.Event[] = [];
@@ -16,11 +15,6 @@ export class ComponentRenderer extends AbstractRenderer {
   private isAbstract: boolean = false;
   private since: string | undefined;
 
-  setDynamicImportPath(value: string) {
-    this.dynamicImportPath = value;
-    return this;
-  }
-
   setAttributes(attrs: CEM.ClassField[]) {
     this.attributes.push(...attrs);
     return this;
@@ -98,8 +92,7 @@ export class ComponentRenderer extends AbstractRenderer {
         [${this.events
           ?.map((event) => `'${event.name}'`)
           .toSorted((a, b) => a.localeCompare(b))
-          .join(', ')}],
-        () => import('${this.dynamicImportPath}') 
+          .join(', ')}]
     );
     
     ${context.componentName}.displayName = '${context.componentName}';

packages/cli/src/scripts/create-wrappers/main.ts

@@ -63,7 +63,6 @@ export default async function createWrappers(packageName: string, outDir: string
         .setAttributes(attributes)
         .setSlots(declaration.slots ?? [])
         .setEvents(declaration.events ?? [])
-        .setDynamicImportPath(webComponentImport)
         .setNote(options.additionalComponentNote ?? '')
         .setIsAbstract(declaration._ui5abstract ?? false)
         .setSince(declaration._ui5since)

packages/compat/src/components/Table/index.tsx

@@ -265,8 +265,7 @@ const Table = withWebComponent<TablePropTypes, TableDomRef>(
   ],
   ['busy', 'hideNoData', 'stickyColumnHeader'],
   ['columns'],
-  ['load-more', 'popin-change', 'row-click', 'selection-change'],
-  () => import('@ui5/webcomponents-compat/dist/Table.js')
+  ['load-more', 'popin-change', 'row-click', 'selection-change']
 );
 
 Table.displayName = 'Table';

packages/compat/src/components/TableCell/index.tsx

@@ -21,14 +21,7 @@ interface TableCellPropTypes extends TableCellAttributes, Omit<CommonProps, 'chi
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>(
-  'ui5-table-cell',
-  [],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableCell.js')
-);
+const TableCell = withWebComponent<TableCellPropTypes, TableCellDomRef>('ui5-table-cell', [], [], [], []);
 
 TableCell.displayName = 'TableCell';
 

packages/compat/src/components/TableColumn/index.tsx

@@ -67,8 +67,7 @@ const TableColumn = withWebComponent<TableColumnPropTypes, TableColumnDomRef>(
   ['minWidth', 'popinDisplay', 'popinText'],
   ['demandPopin'],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableColumn.js')
+  []
 );
 
 TableColumn.displayName = 'TableColumn';

packages/compat/src/components/TableGroupRow/index.tsx

@@ -30,8 +30,7 @@ const TableGroupRow = withWebComponent<TableGroupRowPropTypes, TableGroupRowDomR
   [],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableGroupRow.js')
+  []
 );
 
 TableGroupRow.displayName = 'TableGroupRow';

packages/compat/src/components/TableRow/index.tsx

@@ -56,8 +56,7 @@ const TableRow = withWebComponent<TableRowPropTypes, TableRowDomRef>(
   ['type'],
   ['navigated', 'selected'],
   [],
-  [],
-  () => import('@ui5/webcomponents-compat/dist/TableRow.js')
+  []
 );
 
 TableRow.displayName = 'TableRow';

packages/compat/src/components/Toolbar/OverflowPopover.tsx

@@ -9,7 +9,6 @@ import type {
   ToggleButtonPropTypes
 } from '@ui5/webcomponents-react';
 import { Popover, ToggleButton } from '@ui5/webcomponents-react';
-import { useCanRenderPortal } from '@ui5/webcomponents-react/dist/internal/ssr.js';
 import { stopPropagation } from '@ui5/webcomponents-react/dist/internal/stopPropagation.js';
 import { getUi5TagWithSuffix } from '@ui5/webcomponents-react/dist/internal/utils.js';
 import { Device, useSyncRef } from '@ui5/webcomponents-react-base';
@@ -110,7 +109,10 @@ export const OverflowPopover: FC<OverflowPopoverProps> = (props: OverflowPopover
     }
   };
 
-  const canRenderPortal = useCanRenderPortal();
+  const [canRenderPortal, setCanRenderPortal] = useState(false);
+  useEffect(() => {
+    setCanRenderPortal(true);
+  }, []);
 
   const accessibleRole = (() => {
     if (a11yConfig?.overflowPopover?.contentRole) {

packages/main/package.json

@@ -10,17 +10,13 @@
     ".": {
       "types": "./dist/index.d.ts",
       "browser": "./dist/index.js",
-      "node": "./ssr/index.js",
+      "node": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./wrappers": {
       "types": "./wrappers/index.d.ts",
       "default": "./wrappers/index.js"
     },
-    "./ssr": {
-      "types": "./ssr/index.d.ts",
-      "default": "./ssr/index.js"
-    },
     "./package.json": "./package.json",
     "./styles.css": "./dist/css/index.css",
     "./dist": "./dist/index.js",
@@ -42,10 +38,9 @@
     "./dist/json-imports/*"
   ],
   "scripts": {
-    "clean": "rimraf dist tmp wrappers ssr",
+    "clean": "rimraf dist tmp wrappers",
     "build:i18n": "node scripts/generateI18n.mjs",
     "build:client": "babel src --out-dir dist --extensions .ts,.tsx --env-name client && tsc --project tsconfig.build.json --declarationDir dist",
-    "build:ssr": "babel src --out-dir ssr --extensions .ts,.tsx --env-name ssr && tsc --project tsconfig.build.json --declarationDir ssr",
     "build:wrapper": "babel src --out-dir wrappers --extensions .ts,.tsx --env-name wrapper && tsc --project tsconfig.build.json --declarationDir wrappers",
     "build:css": "postcss --base src --dir dist/css src/**/*.css",
     "build:css-bundle": "node ../../config/merge-css-modules.js",
@@ -87,7 +82,6 @@
   "files": [
     "dist",
     "wrappers",
-    "ssr",
     "CHANGELOG.md",
     "LICENSE",
     "NOTICE.txt",

packages/main/src/internal/ssr.ts

@@ -5,7 +5,6 @@ import { useIsomorphicLayoutEffect, useSyncRef } from '@ui5/webcomponents-react-
 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, parseSemVer } from './utils.js';
 
 const createEventPropName = (eventName: string) => `on${capitalizeFirstLetter(kebabToCamelCase(eventName))}`;
@@ -32,8 +31,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
   regularProperties: string[],
   booleanProperties: string[],
   slotProperties: string[],
-  eventProperties: string[],
-  loader: () => Promise<unknown>
+  eventProperties: string[]
 ) => {
   const webComponentsSupported = parseSemVer(version).major >= 19;
   // displayName will be assigned in the individual files
@@ -48,10 +46,6 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
 
     const [isDefined, setIsDefined] = useState(definedWebComponents.has(Component));
 
-    useServerSideEffect(() => {
-      void loader();
-    });
-
     // regular props (no booleans, no slots and no events)
     const regularProps = regularProperties.reduce((acc, name) => {
       if (rest.hasOwnProperty(name) && isPrimitiveAttribute(rest[name])) {

packages/main/src/internal/withWebComponent.tsx

@@ -160,8 +160,7 @@ const Avatar = withWebComponent<AvatarPropTypes, AvatarDomRef>(
   ['accessibilityAttributes', 'accessibleName', 'colorScheme', 'fallbackIcon', 'icon', 'initials', 'shape', 'size'],
   ['disabled', 'interactive'],
   ['badge'],
-  [],
-  () => import('@ui5/webcomponents/dist/Avatar.js')
+  []
 );
 
 Avatar.displayName = 'Avatar';

packages/main/src/webComponents/Avatar/index.tsx

@@ -144,8 +144,7 @@ const AvatarGroup = withWebComponent<AvatarGroupPropTypes, AvatarGroupDomRef>(
   ['accessibilityAttributes', 'type'],
   [],
   ['overflowButton'],
-  ['click', 'overflow'],
-  () => import('@ui5/webcomponents/dist/AvatarGroup.js')
+  ['click', 'overflow']
 );
 
 AvatarGroup.displayName = 'AvatarGroup';

packages/main/src/webComponents/AvatarGroup/index.tsx

@@ -73,14 +73,7 @@ interface BarPropTypes
  *
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  */
-const Bar = withWebComponent<BarPropTypes, BarDomRef>(
-  'ui5-bar',
-  ['design'],
-  [],
-  ['endContent', 'startContent'],
-  [],
-  () => import('@ui5/webcomponents/dist/Bar.js')
-);
+const Bar = withWebComponent<BarPropTypes, BarDomRef>('ui5-bar', ['design'], [], ['endContent', 'startContent'], []);
 
 Bar.displayName = 'Bar';
 

packages/main/src/webComponents/Bar/index.tsx

@@ -59,8 +59,7 @@ const BarcodeScannerDialog = withWebComponent<BarcodeScannerDialogPropTypes, Bar
   [],
   ['open'],
   [],
-  ['close', 'scan-error', 'scan-success'],
-  () => import('@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js')
+  ['close', 'scan-error', 'scan-success']
 );
 
 BarcodeScannerDialog.displayName = 'BarcodeScannerDialog';

packages/main/src/webComponents/BarcodeScannerDialog/index.tsx

@@ -76,8 +76,7 @@ const Breadcrumbs = withWebComponent<BreadcrumbsPropTypes, BreadcrumbsDomRef>(
   ['design', 'separators'],
   [],
   [],
-  ['item-click'],
-  () => import('@ui5/webcomponents/dist/Breadcrumbs.js')
+  ['item-click']
 );
 
 Breadcrumbs.displayName = 'Breadcrumbs';

packages/main/src/webComponents/Breadcrumbs/index.tsx

@@ -61,8 +61,7 @@ const BreadcrumbsItem = withWebComponent<BreadcrumbsItemPropTypes, BreadcrumbsIt
   ['accessibleName', 'href', 'target'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/BreadcrumbsItem.js')
+  []
 );
 
 BreadcrumbsItem.displayName = 'BreadcrumbsItem';

packages/main/src/webComponents/BreadcrumbsItem/index.tsx

@@ -84,8 +84,7 @@ const BusyIndicator = withWebComponent<BusyIndicatorPropTypes, BusyIndicatorDomR
   ['delay', 'size', 'text', 'textPlacement'],
   ['active'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/BusyIndicator.js')
+  []
 );
 
 BusyIndicator.displayName = 'BusyIndicator';

packages/main/src/webComponents/BusyIndicator/index.tsx

@@ -177,8 +177,7 @@ const Button = withWebComponent<ButtonPropTypes, ButtonDomRef>(
   ],
   ['disabled', 'submits'],
   [],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/Button.js')
+  ['click']
 );
 
 Button.displayName = 'Button';

packages/main/src/webComponents/Button/index.tsx

@@ -206,8 +206,7 @@ const Calendar = withWebComponent<CalendarPropTypes, CalendarDomRef>(
   ['formatPattern', 'maxDate', 'minDate', 'primaryCalendarType', 'secondaryCalendarType', 'selectionMode'],
   ['hideWeekNumbers'],
   ['calendarLegend', 'specialDates'],
-  ['selection-change'],
-  () => import('@ui5/webcomponents/dist/Calendar.js')
+  ['selection-change']
 );
 
 Calendar.displayName = 'Calendar';

packages/main/src/webComponents/Calendar/index.tsx

@@ -22,14 +22,7 @@ interface CalendarDatePropTypes extends CalendarDateAttributes, Omit<CommonProps
  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
  * @abstract
  */
-const CalendarDate = withWebComponent<CalendarDatePropTypes, CalendarDateDomRef>(
-  'ui5-date',
-  ['value'],
-  [],
-  [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarDate.js')
-);
+const CalendarDate = withWebComponent<CalendarDatePropTypes, CalendarDateDomRef>('ui5-date', ['value'], [], [], []);
 
 CalendarDate.displayName = 'CalendarDate';
 

packages/main/src/webComponents/CalendarDate/index.tsx

@@ -37,8 +37,7 @@ const CalendarDateRange = withWebComponent<CalendarDateRangePropTypes, CalendarD
   ['endValue', 'startValue'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarDateRange.js')
+  []
 );
 
 CalendarDateRange.displayName = 'CalendarDateRange';

packages/main/src/webComponents/CalendarDateRange/index.tsx

@@ -58,8 +58,7 @@ const CalendarLegend = withWebComponent<CalendarLegendPropTypes, CalendarLegendD
   [],
   ['hideNonWorkingDay', 'hideSelectedDay', 'hideToday', 'hideWorkingDay'],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarLegend.js')
+  []
 );
 
 CalendarLegend.displayName = 'CalendarLegend';

packages/main/src/webComponents/CalendarLegend/index.tsx

@@ -45,8 +45,7 @@ const CalendarLegendItem = withWebComponent<CalendarLegendItemPropTypes, Calenda
   ['text', 'type'],
   [],
   [],
-  [],
-  () => import('@ui5/webcomponents/dist/CalendarLegendItem.js')
+  []
 );
 
 CalendarLegendItem.displayName = 'CalendarLegendItem';

packages/main/src/webComponents/CalendarLegendItem/index.tsx

@@ -78,8 +78,7 @@ const Card = withWebComponent<CardPropTypes, CardDomRef>(
   ['accessibleName', 'accessibleNameRef', 'loadingDelay'],
   ['loading'],
   ['header'],
-  [],
-  () => import('@ui5/webcomponents/dist/Card.js')
+  []
 );
 
 Card.displayName = 'Card';

packages/main/src/webComponents/Card/index.tsx

@@ -82,8 +82,7 @@ const CardHeader = withWebComponent<CardHeaderPropTypes, CardHeaderDomRef>(
   ['additionalText', 'subtitleText', 'titleText'],
   ['interactive'],
   ['action', 'avatar'],
-  ['click'],
-  () => import('@ui5/webcomponents/dist/CardHeader.js')
+  ['click']
 );
 
 CardHeader.displayName = 'CardHeader';

packages/main/src/webComponents/CardHeader/index.tsx

@@ -194,8 +194,7 @@ const Carousel = withWebComponent<CarouselPropTypes, CarouselDomRef>(
   ],
   ['cyclic', 'hideNavigationArrows', 'hidePageIndicator'],
   [],
-  ['navigate'],
-  () => import('@ui5/webcomponents/dist/Carousel.js')
+  ['navigate']
 );
 
 Carousel.displayName = 'Carousel';

packages/main/src/webComponents/Carousel/index.tsx

@@ -163,8 +163,7 @@ const CheckBox = withWebComponent<CheckBoxPropTypes, CheckBoxDomRef>(
   ['accessibleName', 'accessibleNameRef', 'name', 'text', 'valueState', 'wrappingType'],
   ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'],
   [],
-  ['change'],
-  () => import('@ui5/webcomponents/dist/CheckBox.js')
+  ['change']
 );
 
 CheckBox.displayName = 'CheckBox';