WIP: bundles for MFE

.vscode/settings.json

@@ -1,9 +1,11 @@
 {
     "eslint.workingDirectories": [
+
         "./packages/base",
         "./packages/localization",
         "./packages/main",
         "./packages/fiori",
+        "./packages/ai",
     ],
     "html.customData": [
         "./packages/base/dist/vscode.html-custom-data.json",

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 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";
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css.js";
-import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.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,4 +1,5 @@
-import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
+import { SplitButton } from "@ui5/webcomponents";
+// import SplitButton from "@ui5/webcomponents/dist/SplitButton.js";
 import type Button from "./Button.js";
 
 export default function ButtonTemplate(this: Button) {

packages/ai/src/index.ts

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

packages/ai/tsconfig.json

@@ -38,6 +38,9 @@
 		{
 			"path": "../base"
 		},
+		{
+			"path": "../main"
+		},
 		{
 			"path": "../localization"
 		},

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/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,18 @@ import { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "./Theming.js
 // UI5Element.ts
 import 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";
+export * as CustomElementsScopeUtils from "./CustomElementsScopeUtils.js";
+
 export default UI5Element;
 export {
 	// drag and drop
@@ -135,12 +151,16 @@ export {
 	getTheme,
 	setTheme,
 	getDefaultTheme,
+	isLegacyThemeFamilyAsync,
 
 	// decorators/
 	customElement,
 	event,
+	eventStrict,
 	property,
 	slot,
+	i18n,
+	query,
 
 	// delegate/
 	ItemNavigation,
@@ -164,6 +184,8 @@ export {
 	registerLocaleDataLoader,
 	registerThemePropertiesLoader,
 	registerIconLoader,
+	getIconAccessibleName,
+	registerIcon,
 
 	// Boot.ts
 	attachBoot,
@@ -221,3 +243,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";

packages/base/vite.preload.js

@@ -0,0 +1,13 @@
+/* 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-base.js`,
+		},
+	},
+});

packages/main/package.json

@@ -38,6 +38,7 @@
     "prepublishOnly": "tsc -b"
   },
   "exports": {
+    ".": "./dist/index.js",
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",

packages/main/src/BusyIndicator.ts

@@ -1,15 +1,5 @@
-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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
-import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
-import {
-	isDesktop,
-} from "@ui5/webcomponents-base/dist/Device.js";
-import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import UI5Element, { customElement, property, i18n, jsxRenderer, Device, willShowContent, Keys } from "@ui5/webcomponents-base";
+import type { I18nBundle, Timeout } from "@ui5/webcomponents-base";
 import type BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
 
@@ -21,6 +11,9 @@ import { BUSY_INDICATOR_TITLE } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
 
+const { isDesktop } = Device;
+const { isTabNext } = Keys;
+
 /**
  * @class
  *