WIP: bundles for MFE

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "eslint.workingDirectories": [
+
         "./packages/base",
         "./packages/localization",
         "./packages/main",

packages/ai/src/Button.ts

@@ -1,28 +1,19 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import query from "@ui5/webcomponents-base/dist/decorators/query.js";
-import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import type SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
-import type ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+import UI5Element, { renderFinished, customElement, property, eventStrict as event, slot, query, i18n, jsxRenderer, AccessibilityTextsHelper } from "@ui5/webcomponents-base";
+import type { SplitButton, ButtonDesign } from "@ui5/webcomponents";
 import type ButtonState from "./ButtonState.js";
 import { BUTTON_TOOLTIP_TEXT } from "./generated/i18n/i18n-defaults.js";
 import "./ButtonState.js";
 import ButtonTemplate from "./ButtonTemplate.js";
-import {
-	getEffectiveAriaLabelText,
-	getAssociatedLabelForTexts,
-	getAllAccessibleNameRefTexts,
-} from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
+import type { I18nBundle, AccessibilityAttributes } from "@ui5/webcomponents-base";
+
+const {
+	getEffectiveAriaLabelText,
+	getAssociatedLabelForTexts,
+	getAllAccessibleNameRefTexts,
+} = AccessibilityTextsHelper;
 
 type AIButtonRootAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "roleDescription" | "title" | "ariaKeyShortcuts">;
 type AIButtonArrowButtonAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "expanded" | "title">;
@@ -373,6 +364,4 @@ class Button extends UI5Element {
 
 Button.define();
 export default Button;
-export type {
-	AIButtonAccessibilityAttributes,
-};
+export type { AIButtonAccessibilityAttributes };

packages/ai/src/ButtonState.ts

@@ -1,6 +1,4 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import UI5Element, { customElement, property } from "@ui5/webcomponents-base";
 
 /**
  * @class

packages/ai/src/ButtonTemplate.tsx

@@ -1,3 +1,4 @@
+// import { SplitButton } from "@ui5/webcomponents";
 import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
 import type Button from "./Button.js";
 

packages/ai/src/index.ts

@@ -0,0 +1 @@
+export { default as Button } from "./Button.js";

packages/ai/vite.preload.js

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	build: {
+		emptyOutDir: false,
+		lib: {
+			entry: ["dist/index.js"],
+			formats: ["es"],
+			fileName: (format, entryName) => `bundle-ai.js`,
+		},
+		rollupOptions: {
+			external: [
+				"@ui5/webcomponents-base",
+				"@ui5/webcomponents",
+			],
+		},
+	},
+});

packages/base/src/asset-registries/Icons.ts

@@ -160,7 +160,7 @@ const processName = (name: string) => {
 	return { name, collection };
 };
 
-const getIconDataSync = (iconName: string) => {
+export const getIconDataSync = (iconName: string) => {
 	const { name, collection } = processName(iconName);
 	return getRegisteredIconData(collection, name);
 };
@@ -243,7 +243,6 @@ const _getRegisteredNames = async () => {
 export {
 	registerIconLoader,
 	getIconData,
-	getIconDataSync,
 	getIconAccessibleName,
 	registerIcon,
 	unsafeRegisterIcon,

packages/base/src/delegate/ItemNavigation.ts

@@ -23,10 +23,10 @@ interface ITabbable {
 
 type ItemNavigationOptions = {
 	currentIndex?: number,
-	navigationMode?: NavigationMode,
+	navigationMode?: `${NavigationMode}`,
 	rowSize?: number
 	skipItemsSize?: number,
-	behavior?: ItemNavigationBehavior,
+	behavior?: `${ItemNavigationBehavior}`,
 	getItemsCallback: () => Array<ITabbable>,
 	affectedPropertiesNames?: Array<string>,
 };
@@ -73,9 +73,9 @@ class ItemNavigation {
 
 	_rowSize: number;
 
-	_behavior: ItemNavigationBehavior;
+	_behavior: `${ItemNavigationBehavior}`;
 
-	_navigationMode: NavigationMode;
+	_navigationMode: `${NavigationMode}`;
 
 	_affectedPropertiesNames: Array<string>;
 

packages/base/src/index.ts

@@ -28,13 +28,17 @@ import {
 	getTheme,
 	setTheme,
 	getDefaultTheme,
+	isLegacyThemeFamilyAsync,
 } from "./config/Theme.js";
 
 // decorators/
 import customElement from "./decorators/customElement.js";
 import event from "./decorators/event.js";
+import eventStrict from "./decorators/event-strict.js";
 import property from "./decorators/property.js";
 import slot from "./decorators/slot.js";
+import i18n from "./decorators/i18n.js";
+import query from "./decorators/query.js";
 
 // delegate/
 import ItemNavigation from "./delegate/ItemNavigation.js";
@@ -54,7 +58,7 @@ import { URLListValidator, sanitizeHTML } from "./util/HTMLSanitizer.js";
 import { registerI18nLoader } from "./asset-registries/i18n.js";
 import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
 import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
-import { registerIconLoader } from "./asset-registries/Icons.js";
+import { registerIconLoader, getIconAccessibleName, registerIcon } from "./asset-registries/Icons.js";
 
 // Boot.ts
 import { attachBoot } from "./Boot.js";
@@ -105,6 +109,59 @@ import { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "./Theming.js
 // UI5Element.ts
 import UI5Element from "./UI5Element.js";
 
+export { jsx } from "./jsx-runtime.js";
+export { useState } from "./thirdparty/preact/hooks.module.js";
+
+export { default as jsxRenderer } from "./renderer/JsxRenderer.js";
+export * as AccessibilityTextsHelper from "./util/AccessibilityTextsHelper.js";
+export * as Keys from "./Keys.js";
+export { default as willShowContent } from "./util/willShowContent.js";
+export * as Device from "./Device.js";
+export * as Tooltips from "./config/Tooltips.js";
+export { default as toLowercaseEnumValue } from "./util/toLowercaseEnumValue.js";
+export * as InputElementsFormSupport from "./features/InputElementsFormSupport.js";
+export * as Icons from "./asset-registries/Icons.js";
+export { default as executeTemplate } from "./renderer/executeTemplate.js";
+export * as CustomElementsScopeUtils from "./CustomElementsScopeUtils.js";
+
+export { default as getActiveElement } from "./util/getActiveElement.js";
+export { default as getParentElement } from "./util/getParentElement.js";
+export { getTabbableElements } from "./util/TabbableElements.js";
+export { getFirstFocusableElement } from "./util/FocusableElements.js";
+export { getLastFocusableElement } from "./util/FocusableElements.js";
+export { default as DragRegistry } from "./util/dragAndDrop/DragRegistry.js";
+export { default as DOMReferenceConverter } from "./converters/DOMReference.js";
+export { default as clamp } from "./util/clamp.js";
+export * as PopupUtils from "./util/PopupUtils.js";
+export { instanceOfUI5Element } from "./UI5Element.js";
+export * as ManagedStyles from "./ManagedStyles.js";
+export { default as getSharedResource } from "./getSharedResource.js";
+export { getFeature, registerFeature } from "./FeaturesRegistry.js";
+export { default as isEventMarked } from "./util/isEventMarked.js";
+export { default as getNormalizedTarget } from "./util/getNormalizedTarget.js";
+export { default as isElementInView } from "./util/isElementInView.js";
+
+// TODO: barrel?
+export { findClosestPosition } from "./util/dragAndDrop/findClosestPosition.js";
+export { findClosestPositionsByKey } from "./util/dragAndDrop/findClosestPosition.js";
+export { isMovingKey } from "./util/dragAndDrop/findClosestPosition.js";
+
+export { default as handleDragOver } from "./util/dragAndDrop/handleDragOver.js";
+export { default as handleDrop } from "./util/dragAndDrop/handleDrop.js";
+export { default as longDragOverHandler } from "./util/dragAndDrop/longDragOverHandler.js";
+
+export { default as debounce } from "./util/debounce.js";
+export { default as throttle } from "./util/throttle.js";
+export * as Location from "./Location.js";
+export { default as announce } from "./util/InvisibleMessage.js";
+export { default as arraysAreEqual } from "./util/arraysAreEqual.js";
+export * as valueStateNavigation from "./util/valueStateNavigation.js";
+// @ts-expect-error
+export { default as encodeXML } from "./sap/base/security/encodeXML.js";
+export * as Caret from "./util/Caret.js";
+export { default as generateHighlightedMarkup } from "./util/generateHighlightedMarkup.js";
+export * as Illustrations from "./asset-registries/Illustrations.js";
+
 export default UI5Element;
 export {
 	// drag and drop
@@ -135,12 +192,16 @@ export {
 	getTheme,
 	setTheme,
 	getDefaultTheme,
+	isLegacyThemeFamilyAsync,
 
 	// decorators/
 	customElement,
 	event,
+	eventStrict,
 	property,
 	slot,
+	i18n,
+	query,
 
 	// delegate/
 	ItemNavigation,
@@ -164,6 +225,8 @@ export {
 	registerLocaleDataLoader,
 	registerThemePropertiesLoader,
 	registerIconLoader,
+	getIconAccessibleName,
+	registerIcon,
 
 	// Boot.ts
 	attachBoot,
@@ -221,3 +284,6 @@ export type JsxTemplate = () => JsxTemplateResult;
 
 export type * from "./types.d.ts";
 export type * from "./jsx-runtime.d.ts";
+export type { ITabbable } from "./delegate/ItemNavigation.js";
+export type { I18nText } from "./i18nBundle.js";
+export type { IconData, UnsafeIconData } from "./asset-registries/Icons.js";

packages/base/src/index2.ts

@@ -0,0 +1,133 @@
+import type { JSX } from "./jsx-runtime.d.ts";
+import type UI5Element from "./UI5Element.js";
+
+// animations/
+export { default as scroll } from "./animations/scroll.js";
+export { default as slideDown } from "./animations/slideDown.js";
+export { default as slideUp } from "./animations/slideUp.js";
+
+// config/
+export { getAnimationMode, setAnimationMode } from "./config/AnimationMode.js";
+export { getCalendarType } from "./config/CalendarType.js";
+export { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "./config/FormatSettings.js";
+export {
+	setDefaultIconCollection,
+	getDefaultIconCollection,
+} from "./config/Icons.js";
+export { RegisteredIconCollection } from "./asset-registries/util/IconCollectionsByTheme.js";
+export { default as getEffectiveIconCollection } from "./asset-registries/util/getIconCollectionByTheme.js";
+export { startMultipleDrag } from "./DragAndDrop.js";
+export {
+	getLanguage,
+	setLanguage,
+	getDefaultLanguage,
+	setFetchDefaultLanguage,
+	getFetchDefaultLanguage,
+} from "./config/Language.js";
+export { getNoConflict, setNoConflict } from "./config/NoConflict.js";
+export {
+	getTheme,
+	setTheme,
+	getDefaultTheme,
+} from "./config/Theme.js";
+
+// decorators/
+export { default as customElement } from "./decorators/customElement.js";
+export { default as event } from "./decorators/event.js";
+export { default as eventStrict } from "./decorators/event-strict.js";
+export { default as property } from "./decorators/property.js";
+export { default as slot } from "./decorators/slot.js";
+export { default as i18n } from "./decorators/i18n.js";
+
+// delegate/
+export { default as ItemNavigation } from "./delegate/ItemNavigation.js";
+export { default as ResizeHandler } from "./delegate/ResizeHandler.js";
+export { default as ScrollEnablement } from "./delegate/ScrollEnablement.js";
+
+// locale/
+export { default as applyDirection } from "./locale/applyDirection.js";
+export { attachDirectionChange, detachDirectionChange } from "./locale/directionChange.js";
+export { default as getEffectiveDir } from "./locale/getEffectiveDir.js";
+export { attachLanguageChange, detachLanguageChange } from "./locale/languageChange.js";
+
+// util/
+export { URLListValidator, sanitizeHTML } from "./util/HTMLSanitizer.js";
+
+// Assets.ts
+export { registerI18nLoader } from "./asset-registries/i18n.js";
+export { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
+export { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+export { registerIconLoader, getIconAccessibleName } from "./asset-registries/Icons.js";
+
+// Boot.ts
+export { attachBoot } from "./Boot.js";
+
+// CustomElementsScope.ts
+export {
+	setCustomElementsScopingSuffix,
+	getCustomElementsScopingSuffix,
+	setCustomElementsScopingRules,
+	getCustomElementsScopingRules,
+	getEffectiveScopingSuffixForTag,
+} from "./CustomElementsScope.js";
+
+// Device.ts
+export {
+	supportsTouch,
+	isSafari,
+	isChrome,
+	isFirefox,
+	isPhone,
+	isTablet,
+	isDesktop,
+	isCombi,
+	isIOS,
+	isAndroid,
+} from "./Device.js";
+
+// EventProvider.ts
+export { default as EventProvider } from "./EventProvider.js";
+
+// i18nBundle.ts
+export { default as I18nBundle, getI18nBundle, registerCustomI18nBundleGetter } from "./i18nBundle.js";
+
+// MediaRange.ts
+export { default as MediaRange } from "./MediaRange.js";
+
+// Render.ts
+export {
+	renderDeferred,
+	renderImmediately,
+	cancelRender,
+	renderFinished,
+} from "./Render.js";
+export * as CustomElementsScopeUtils from "./CustomElementsScopeUtils.js";
+
+// Theming.ts
+export { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "./Theming.js";
+
+// UI5Element.ts
+export { default as UI5Element } from "./UI5Element.js";
+
+export { default as jsxRenderer } from "./renderer/JsxRenderer.js";
+export * as AccessibilityTextsHelper from "./util/AccessibilityTextsHelper.js";
+export * as Keys from "./Keys.js";
+export { default as willShowContent } from "./util/willShowContent.js";
+export * as Device from "./Device.js";
+export * as Tooltips from "./config/Tooltips.js";
+export { default as toLowercaseEnumValue } from "./util/toLowercaseEnumValue.js";
+export * as InputElementsFormSupport from "./features/InputElementsFormSupport.js";
+export * as Icons from "./asset-registries/Icons.js";
+export { default as executeTemplate } from "./renderer/executeTemplate.js";
+
+type TargetedCustomEvent<D, T> = Omit<CustomEvent<D>, "currentTarget"> & { currentTarget: T };
+// export type UI5NativeEvent<T extends keyof HTMLElementTagNameMap, N> = Parameters<JSX.IntrinsicElements[T][N]>[0];
+export type UI5CustomEvent<T extends UI5Element, N extends keyof T["eventDetails"]> = TargetedCustomEvent<T["eventDetails"][N], T>;
+export type JsxTemplateResult = JSX.Element | void;
+export type JsxTemplate = () => JsxTemplateResult;
+
+export type * from "./types.d.ts";
+export type * from "./jsx-runtime.d.ts";
+export type { ITabbable } from "./delegate/ItemNavigation.js";
+export type { I18nText } from "./i18nBundle.js";
+export type { IconData, UnsafeIconData } from "./asset-registries/Icons.js";