From bb2a7e26a52f82b867500551e6b22425985b1978 Mon Sep 17 00:00:00 2001 From: Peter Skelin Date: Thu, 2 Oct 2025 14:47:51 +0300 Subject: [PATCH 1/2] chore: WIP bundles for MFE --- packages/base/src/asset-registries/Icons.ts | 3 +- packages/base/src/index.ts | 22 ++- packages/base/src/index2.ts | 133 ++++++++++++++++++ packages/base/vite.preload.js | 13 ++ packages/main/src/BusyIndicator.ts | 17 +-- packages/main/src/Button.ts | 63 +++------ packages/main/src/ButtonTemplate.tsx | 3 +- packages/main/src/Icon.ts | 20 +-- packages/main/src/Label.ts | 8 +- packages/main/src/Text.ts | 18 +-- packages/main/src/index.ts | 6 + packages/main/vite.preload.js | 18 +++ packages/main/vite.sfc.js | 18 +++ packages/tools/components-package/eslint.js | 4 + packages/tools/lib/css-processors/shared.mjs | 2 +- .../tools/lib/generate-json-imports/themes.js | 2 +- test-bundles.html | 53 +++++++ 17 files changed, 308 insertions(+), 95 deletions(-) create mode 100644 packages/base/src/index2.ts create mode 100644 packages/base/vite.preload.js create mode 100644 packages/main/src/index.ts create mode 100644 packages/main/vite.preload.js create mode 100644 packages/main/vite.sfc.js create mode 100644 test-bundles.html diff --git a/packages/base/src/asset-registries/Icons.ts b/packages/base/src/asset-registries/Icons.ts index d21be0274d43..ca50ddeddf46 100644 --- a/packages/base/src/asset-registries/Icons.ts +++ b/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, diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 0765f6461e3d..01be477328f1 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -33,8 +33,10 @@ import { // 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"; // delegate/ import ItemNavigation from "./delegate/ItemNavigation.js"; @@ -54,7 +56,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 } from "./asset-registries/Icons.js"; // Boot.ts import { attachBoot } from "./Boot.js"; @@ -105,6 +107,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 @@ -139,8 +153,10 @@ export { // decorators/ customElement, event, + eventStrict, property, slot, + i18n, // delegate/ ItemNavigation, @@ -164,6 +180,7 @@ export { registerLocaleDataLoader, registerThemePropertiesLoader, registerIconLoader, + getIconAccessibleName, // Boot.ts attachBoot, @@ -221,3 +238,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"; diff --git a/packages/base/src/index2.ts b/packages/base/src/index2.ts new file mode 100644 index 000000000000..3abd956b3955 --- /dev/null +++ b/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 = Omit, "currentTarget"> & { currentTarget: T }; +// export type UI5NativeEvent = Parameters[0]; +export type UI5CustomEvent = TargetedCustomEvent; +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"; diff --git a/packages/base/vite.preload.js b/packages/base/vite.preload.js new file mode 100644 index 000000000000..0afaf1992561 --- /dev/null +++ b/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`, + }, + }, +}); diff --git a/packages/main/src/BusyIndicator.ts b/packages/main/src/BusyIndicator.ts index 736e3e925d77..a1891ff81f9e 100644 --- a/packages/main/src/BusyIndicator.ts +++ b/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 * diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 32a3e0b32cc2..2b0b30ef789c 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -1,49 +1,24 @@ -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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; -import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; -import { - isSpace, - isEnter, - isEscape, - isShift, -} from "@ui5/webcomponents-base/dist/Keys.js"; -import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; -import type { AccessibilityAttributes, AriaRole } from "@ui5/webcomponents-base"; -import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; -import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import { getIconAccessibleName } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js"; - -import { - isDesktop, - isSafari, -} from "@ui5/webcomponents-base/dist/Device.js"; -import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js"; -import { submitForm, resetForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js"; -import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js"; -import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js"; -import ButtonDesign from "./types/ButtonDesign.js"; -import ButtonType from "./types/ButtonType.js"; -import ButtonBadgeDesign from "./types/ButtonBadgeDesign.js"; +import UI5Element, { customElement, property, eventStrict as event, slot, jsxRenderer, i18n, AccessibilityTextsHelper, Keys, getIconAccessibleName, willShowContent, Device, Tooltips, toLowercaseEnumValue, InputElementsFormSupport } from "@ui5/webcomponents-base"; + +import type { AccessibilityAttributes, AriaRole, ITabbable, I18nBundle, I18nText } from "@ui5/webcomponents-base"; + +import type ButtonType from "./types/ButtonType.js"; +import type ButtonDesign from "./types/ButtonDesign.js"; import type ButtonAccessibleRole from "./types/ButtonAccessibleRole.js"; import type ButtonBadge from "./ButtonBadge.js"; import ButtonTemplate from "./ButtonTemplate.js"; -import { - BUTTON_ARIA_TYPE_ACCEPT, - BUTTON_ARIA_TYPE_REJECT, - BUTTON_ARIA_TYPE_EMPHASIZED, - BUTTON_ARIA_TYPE_ATTENTION, - BUTTON_BADGE_ONE_ITEM, - BUTTON_BADGE_MANY_ITEMS, -} from "./generated/i18n/i18n-defaults.js"; + +import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPHASIZED, BUTTON_ARIA_TYPE_ATTENTION, BUTTON_BADGE_ONE_ITEM, BUTTON_BADGE_MANY_ITEMS } from "./generated/i18n/i18n-defaults.js"; // Styles import buttonCss from "./generated/themes/Button.css.js"; +const { getEffectiveAriaLabelText } = AccessibilityTextsHelper; +const { isSpace, isEnter, isEscape, isShift } = Keys; +const { isDesktop, isSafari } = Device; +const { getEnableDefaultTooltips } = Tooltips; +const { submitForm, resetForm } = InputElementsFormSupport; + /** * Interface for components that may be used as a button inside numerous higher-order components * @public @@ -458,7 +433,7 @@ class Button extends UI5Element implements IButton { } _setBadgeOverlayStyle() { - const needsOverflowVisible = this.badge.length && (this.badge[0].design === ButtonBadgeDesign.AttentionDot || this.badge[0].design === ButtonBadgeDesign.OverlayText); + const needsOverflowVisible = this.badge.length && (this.badge[0].design === "AttentionDot" || this.badge[0].design === "OverlayText"); if (needsOverflowVisible) { this._internals.states.add("has-overlay-badge"); @@ -579,7 +554,7 @@ class Button extends UI5Element implements IButton { } get hasButtonType() { - return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent; + return this.design !== "Default" && this.design !== "Transparent"; } get isIconOnly() { @@ -670,15 +645,15 @@ class Button extends UI5Element implements IButton { } get _isSubmit() { - return this.type === ButtonType.Submit || this.submits; + return this.type === "Submit" || this.submits; } get _isReset() { - return this.type === ButtonType.Reset; + return this.type === "Reset"; } get shouldRenderBadge() { - return !!this.badge.length && (!!this.badge[0].text.length || this.badge[0].design === ButtonBadgeDesign.AttentionDot); + return !!this.badge.length && (!!this.badge[0].text.length || this.badge[0].design === "AttentionDot"); } } diff --git a/packages/main/src/ButtonTemplate.tsx b/packages/main/src/ButtonTemplate.tsx index dc6d1afa8c29..8013fbd36d22 100644 --- a/packages/main/src/ButtonTemplate.tsx +++ b/packages/main/src/ButtonTemplate.tsx @@ -1,7 +1,6 @@ import type Button from "./Button.js"; import Icon from "./Icon.js"; import BusyIndicator from "./BusyIndicator.js"; -import BusyIndicatorSize from "./types/BusyIndicatorSize.js"; export default function ButtonTemplate(this: Button, injectedProps?: { ariaPressed?: boolean, @@ -77,7 +76,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: { `bundle-main.js`, + }, + rollupOptions: { + external: [ + "@ui5/webcomponents-base", + ], + }, + }, +}); diff --git a/packages/main/vite.sfc.js b/packages/main/vite.sfc.js new file mode 100644 index 000000000000..395ea56f1ff3 --- /dev/null +++ b/packages/main/vite.sfc.js @@ -0,0 +1,18 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + emptyOutDir: false, + lib: { + entry: ["dist/Button.js"], + formats: ["es"], + fileName: (format, entryName) => `Button.sfc.js`, + }, + rollupOptions: { + external: (id, parentId, isResolved) => { + return !(id.includes("ButtonTemplate.js") || id.includes("Button.css.js")) && !id.endsWith("Button.js"); + }, + }, + }, +}); diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js index ce352328167f..0016939b9d85 100644 --- a/packages/tools/components-package/eslint.js +++ b/packages/tools/components-package/eslint.js @@ -103,6 +103,10 @@ module.exports = { // "requireReturn": false // }], "valid-typeof": 2, + "no-restricted-imports": ["error", { + "patterns": ["@ui5/webcomponents-base/dist/*"], + }], + "object-curly-newline": ["error", { "ImportDeclaration": "never", "ExportDeclaration": "never" }], "accessor-pairs": 2, "block-scoped-var": 1, diff --git a/packages/tools/lib/css-processors/shared.mjs b/packages/tools/lib/css-processors/shared.mjs index 0cda3c30d4c1..54b75d6f26e4 100644 --- a/packages/tools/lib/css-processors/shared.mjs +++ b/packages/tools/lib/css-processors/shared.mjs @@ -27,7 +27,7 @@ const writeFileIfChanged = async (fileName, content) => { const DEFAULT_THEME = assets.themes.default; const getDefaultThemeCode = packageName => { - return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; + return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base"; import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js"; import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js"; diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js index b61d28a7226a..c5f9537c2043 100644 --- a/packages/tools/lib/generate-json-imports/themes.js +++ b/packages/tools/lib/generate-json-imports/themes.js @@ -31,7 +31,7 @@ const generate = async (argv) => { // dynamic imports file content const contentDynamic = function (lines) { return `// @ts-nocheck -import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; +import { registerThemePropertiesLoader } from "@ui5/webcomponents-base"; const loadThemeProperties = async (themeName) => { switch (themeName) { diff --git a/test-bundles.html b/test-bundles.html new file mode 100644 index 000000000000..645af4cc69de --- /dev/null +++ b/test-bundles.html @@ -0,0 +1,53 @@ + + + + + + Document + + + + + + + + + + + Button + + \ No newline at end of file From d3b9d82e127b2668a9f25f746fd6278765ac7d2d Mon Sep 17 00:00:00 2001 From: Peter Skelin Date: Mon, 6 Oct 2025 08:30:03 +0300 Subject: [PATCH 2/2] chore: consumption from fiori package --- .vscode/settings.json | 2 ++ packages/ai/src/Button.ts | 31 ++++++---------- packages/ai/src/ButtonState.ts | 4 +-- packages/ai/src/ButtonTemplate.tsx | 3 +- packages/ai/src/index.ts | 1 + packages/ai/tsconfig.json | 3 ++ packages/ai/vite.preload.js | 19 ++++++++++ packages/base/src/index.ts | 7 +++- packages/main/package.json | 1 + packages/main/src/SplitButton.ts | 39 +++++++++------------ packages/main/src/index.ts | 4 +++ packages/tools/components-package/eslint.js | 5 ++- packages/tools/lib/create-icons/index.js | 6 ++-- test-bundles.html | 16 +++++++-- 14 files changed, 86 insertions(+), 55 deletions(-) create mode 100644 packages/ai/src/index.ts create mode 100644 packages/ai/vite.preload.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 444d5bf4a118..c2360b2907c1 100644 --- a/.vscode/settings.json +++ b/.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", diff --git a/packages/ai/src/Button.ts b/packages/ai/src/Button.ts index 1f8bdd590f3a..dd86d089b373 100644 --- a/packages/ai/src/Button.ts +++ b/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; type AIButtonArrowButtonAccessibilityAttributes = Pick; @@ -373,6 +364,4 @@ class Button extends UI5Element { Button.define(); export default Button; -export type { - AIButtonAccessibilityAttributes, -}; +export type { AIButtonAccessibilityAttributes }; diff --git a/packages/ai/src/ButtonState.ts b/packages/ai/src/ButtonState.ts index 223e771f53d7..70a3d74ee3d9 100644 --- a/packages/ai/src/ButtonState.ts +++ b/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 diff --git a/packages/ai/src/ButtonTemplate.tsx b/packages/ai/src/ButtonTemplate.tsx index 095f49965ad0..f9953da3f27a 100644 --- a/packages/ai/src/ButtonTemplate.tsx +++ b/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) { diff --git a/packages/ai/src/index.ts b/packages/ai/src/index.ts new file mode 100644 index 000000000000..e553cf4a31a8 --- /dev/null +++ b/packages/ai/src/index.ts @@ -0,0 +1 @@ +export { default as Button } from "./Button.js"; diff --git a/packages/ai/tsconfig.json b/packages/ai/tsconfig.json index a1850462744a..52e963716c66 100644 --- a/packages/ai/tsconfig.json +++ b/packages/ai/tsconfig.json @@ -38,6 +38,9 @@ { "path": "../base" }, + { + "path": "../main" + }, { "path": "../localization" }, diff --git a/packages/ai/vite.preload.js b/packages/ai/vite.preload.js new file mode 100644 index 000000000000..8c7c99433c9a --- /dev/null +++ b/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", + ], + }, + }, +}); diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts index 01be477328f1..404bdd0b5738 100644 --- a/packages/base/src/index.ts +++ b/packages/base/src/index.ts @@ -28,6 +28,7 @@ import { getTheme, setTheme, getDefaultTheme, + isLegacyThemeFamilyAsync, } from "./config/Theme.js"; // decorators/ @@ -37,6 +38,7 @@ 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"; @@ -56,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, getIconAccessibleName } from "./asset-registries/Icons.js"; +import { registerIconLoader, getIconAccessibleName, registerIcon } from "./asset-registries/Icons.js"; // Boot.ts import { attachBoot } from "./Boot.js"; @@ -149,6 +151,7 @@ export { getTheme, setTheme, getDefaultTheme, + isLegacyThemeFamilyAsync, // decorators/ customElement, @@ -157,6 +160,7 @@ export { property, slot, i18n, + query, // delegate/ ItemNavigation, @@ -181,6 +185,7 @@ export { registerThemePropertiesLoader, registerIconLoader, getIconAccessibleName, + registerIcon, // Boot.ts attachBoot, diff --git a/packages/main/package.json b/packages/main/package.json index 823bcd49cf42..aff6d829276c 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -38,6 +38,7 @@ "prepublishOnly": "tsc -b" }, "exports": { + ".": "./dist/index.js", "./src/*": "./src/*", "./dist/*": "./dist/*", "./package.json": "./package.json", diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index f7c8f5f013b0..8f8fc6bd6c3d 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -1,26 +1,5 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; -import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import { - isEscape, - isSpace, - isEnter, - isDown, - isUp, - isDownAlt, - isUpAlt, - isF4, - isShift, - isTabNext, - isTabPrevious, -} from "@ui5/webcomponents-base/dist/Keys.js"; -import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js"; -import type { AriaHasPopup, UI5CustomEvent } from "@ui5/webcomponents-base"; -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 UI5Element, { customElement, eventStrict as event, property, slot, Keys, i18n, jsxRenderer } from "@ui5/webcomponents-base"; +import type { AccessibilityAttributes, I18nBundle, AriaHasPopup, UI5CustomEvent } from "@ui5/webcomponents-base"; import type ButtonDesign from "./types/ButtonDesign.js"; import type Button from "./Button.js"; @@ -36,6 +15,20 @@ import SplitButtonTemplate from "./SplitButtonTemplate.js"; // Styles import SplitButtonCss from "./generated/themes/SplitButton.css.js"; +const { + isEscape, + isSpace, + isEnter, + isDown, + isUp, + isDownAlt, + isUpAlt, + isF4, + isShift, + isTabNext, + isTabPrevious, +} = Keys; + type SplitButtonRootAccAttributes = Pick; type SplitButtonArrowButtonAccAtributes = Pick; type SplitButtonAccessibilityAttributes = {root?: SplitButtonRootAccAttributes, arrowButton?: SplitButtonArrowButtonAccAtributes} diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index 304faaa30dc5..0fe16420067a 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -4,3 +4,7 @@ export { default as Label } from "./Label.js"; export { default as BusyIndicator } from "./BusyIndicator.js"; export { default as Text } from "./Text.js"; + +export { default as SplitButton } from "./SplitButton.js"; + +export type { default as ButtonDesign } from "./types/ButtonDesign.js"; diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js index 0016939b9d85..e6e06691e8f5 100644 --- a/packages/tools/components-package/eslint.js +++ b/packages/tools/components-package/eslint.js @@ -104,7 +104,10 @@ module.exports = { // }], "valid-typeof": 2, "no-restricted-imports": ["error", { - "patterns": ["@ui5/webcomponents-base/dist/*"], + "patterns": [ + "@ui5/webcomponents-base/dist/*", + "@ui5/webcomponents/dist/*", + ], }], "object-curly-newline": ["error", { "ImportDeclaration": "never", "ExportDeclaration": "never" }], diff --git a/packages/tools/lib/create-icons/index.js b/packages/tools/lib/create-icons/index.js index e57e043611ac..5853c28422ec 100644 --- a/packages/tools/lib/create-icons/index.js +++ b/packages/tools/lib/create-icons/index.js @@ -1,7 +1,7 @@ const fs = require("fs").promises; const path = require("path"); -const iconTemplate = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js"; +const iconTemplate = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base"; const name = "${name}"; const pathData = "${pathData}"; @@ -16,7 +16,7 @@ export default "${collection}/${name}"; export { pathData, ltr, accData };`; -const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName, versioned) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js"; +const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName, versioned) => `import { registerIcon } from "@ui5/webcomponents-base"; import { ${accData.key} } from "${versioned ? "../" : "./"}generated/i18n/i18n-defaults.js"; const name = "${name}"; @@ -33,7 +33,7 @@ export { pathData, ltr, accData };`; -const collectionTemplate = (name, versions, fullName) => `import { isLegacyThemeFamilyAsync } from "@ui5/webcomponents-base/dist/config/Theme.js"; +const collectionTemplate = (name, versions, fullName) => `import { isLegacyThemeFamilyAsync } from "@ui5/webcomponents-base"; import { pathData as pathData${versions[0]}, ltr, accData } from "./${versions[0]}/${name}.js"; import { pathData as pathData${versions[1]} } from "./${versions[1]}/${name}.js"; diff --git a/test-bundles.html b/test-bundles.html index 645af4cc69de..7a4507dda4c5 100644 --- a/test-bundles.html +++ b/test-bundles.html @@ -11,7 +11,8 @@ { "imports1": { "@ui5/webcomponents": "./packages/main/dist/bundle-main.js", - "@ui5/webcomponents-base": "./packages/base/dist/bundle-base.js" + "@ui5/webcomponents-base": "./packages/base/dist/bundle-base.js", + "@ui5/webcomponents-ai": "./packages/ai/dist/bundle-ai.js" } } @@ -20,10 +21,13 @@ { "imports": { "@ui5/webcomponents": "./packages/main/dist/index.js", + "@ui5/webcomponents-ai": "./packages/ai/dist/index.js", + "@ui5/webcomponents-ai/dist/": "./packages/ai/dist/", "@ui5/webcomponents/dist/": "./packages/main/dist/", "@ui5/webcomponents-base": "./packages/base/dist/bundle-base.js", "@ui5/webcomponents-base/dist/ssr-dom.js": "./packages/base/dist/ssr-dom.js", "@ui5/webcomponents-base/jsx-runtime": "./packages/base/dist/jsx-runtime.js", + "@ui5/webcomponents-icons/dist/": "./packages/icons/dist/", "@ui5/webcomponents-theming/dist/": "./packages/theming/dist/" } } @@ -34,6 +38,7 @@ "imports1": { "@ui5/webcomponents": "./packages/main/dist/index.js", "@ui5/webcomponents/dist/": "./packages/main/dist/", + "@ui5/webcomponents-ai/dist/": "./packages/ai/dist/", "@ui5/webcomponents-base": "./packages/base/dist/index.js", "@ui5/webcomponents-theming/dist/": "./packages/theming/dist/", "@ui5/webcomponents-base2": "./packages/base/dist/index.js", @@ -46,8 +51,15 @@ Button + + + + + \ No newline at end of file