refactor: improve public imports and project structure

README.md

@@ -63,21 +63,21 @@ If your application should run on browsers without native Web Components support
 ### Edge only
 
 ```js
-import "@ui5/webcomponents-base/src/browsersupport/Edge.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/Edge.js";
 ```
 
 ### Edge and IE11
 
 ```js
-import "@ui5/webcomponents-base/src/browsersupport/IE11.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/IE11.js";
 ```
 
 *Note:* Importing the module for IE11 support automatically enables Edge support as well, so there is no need to import them both explicitly.
 
 Example:
 
 ```js
-import "@ui5/webcomponents-base/src/browsersupport/IE11.js"; // This will enable Edge and IE11 support for all Web Components below
+import "@ui5/webcomponents-base/src/features/browsersupport/IE11.js"; // This will enable Edge and IE11 support for all Web Components below
 import "@ui5/webcomponents/dist/Button.js"; // loads ui5-button
 import "@ui5/webcomponents/dist/Label.js"; // loads ui5-label
 ```

docs/PublicModuleImports.md

@@ -80,13 +80,13 @@ Most modern browsers (**Chrome, Firefox, Safari**) support Web Components native
 If your app needs to be able to run additionally on **Edge**, you should import the following module:
 
 ```js
-import "@ui5/webcomponents-base/src/browsersupport/Edge.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/Edge.js";
 ```
 
 and if your app needs to run on both **Edge** and **IE11**, you should instead import:
 
 ```js
-import "@ui5/webcomponents-base/src/browsersupport/IE11.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/IE11.js";
 ```
 (this also includes Edge support).
 
@@ -116,7 +116,7 @@ import "@ui5/webcomponents/dist/ThemePropertiesProvider.js";
 
 and
 ```js
-import { setTheme } from "@ui5/webcomponents-base/Theming.js";
+import { setTheme } from "@ui5/webcomponents-base/src/features/Theming.js";
 ```
 (for changing the theme at runtime)
 
@@ -145,7 +145,7 @@ By importing the second module, you get the:
 method that allows you to change the theme during runtime, if necessary.
 Example:
 ```js
-import { setTheme } from "@ui5/webcomponents-base/Theming.js";
+import { setTheme } from "@ui5/webcomponents-base/src/features/Theming.js";
 setTheme("sap_belize_hcb");
 ```
 
@@ -209,7 +209,7 @@ rollup configuration file and will not work on its own.
 ### 4. Form Support
 
 ```js
-import "@ui5/webcomponents/dist/InputElementsFormSupport.js";
+import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
 ```
 
 HTML ```<form>``` only submits a couple of standard HTML elements such as ```<input>``` and ```<textarea>``` to name a few.
@@ -239,7 +239,7 @@ element will be able to submit the closest ```form``` it's placed in, provided y
 ### 5. Input Suggestions
 
 ```js
-import "@ui5/webcomponents/dist/InputSuggestions";
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
 ```
 
 The ```<ui5-input>``` element acts as an ```<input>``` with the Fiori design and added functionality, such as for example value state.
@@ -253,10 +253,10 @@ To enable the functionality, import the above module into your app.
 ### 6. Advanced calendar types
 
 ```js
-import "@ui5/webcomponents-core/dist/sap/ui/core/date/Buddhist.js";
-import "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
-import "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
-import "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
+import "@ui5/webcomponents-base/src/features/calendar/Buddhist.js";
+import "@ui5/webcomponents-base/src/features/calendar/Islamic.js";
+import "@ui5/webcomponents-base/src/features/calendar/Japanese.js";
+import "@ui5/webcomponents-base/src/features/calendar/Persian.js";
 ```
 
 The <code>ui5-datepicker</code> web component supports Gregorian Calendar by default.

packages/base/src/features/Theming.js

@@ -0,0 +1,3 @@
+import { setTheme, addCustomCSS } from "../Theming.js";
+
+export { setTheme, addCustomCSS };

packages/base/src/browsersupport/Edge.js → packages/base/src/features/browsersupport/Edge.js

@@ -3,4 +3,4 @@ import "url-search-params-polyfill";
 
 
 // "pseudo mutation observer" fix for nodeValue
-import "../compatibility/patchNodeValue.js";
+import "../../compatibility/patchNodeValue.js";

packages/base/src/features/browsersupport/IE11.js

@@ -0,0 +1,38 @@
+// String
+import "@ui5/webcomponents-core/dist/sap/ui/thirdparty/es6-string-methods.js";
+
+// Object
+import "../../thirdparty/Object.entries.js";
+
+// Array
+import "../../thirdparty/Array.prototype.fill.js";
+import "../../thirdparty/Array.prototype.includes.js";
+
+// Number
+import "../../thirdparty/Number.isInteger.js";
+import "../../thirdparty/Number.isNaN.js";
+import "../../thirdparty/Number.parseInt.js";
+
+// Element
+import "../../thirdparty/Element.prototype.matches.js";
+import "../../thirdparty/Element.prototype.closest.js";
+
+// WeakSet
+import "../../thirdparty/WeakSet.js";
+
+// fetch
+import "../../thirdparty/fetch.js";
+
+// async - await
+import "regenerator-runtime/runtime";
+
+// CSS Custom Properties polyfill
+import { cssVars, resetCssVars } from "../../thirdparty/css-vars-ponyfill.js";
+
+// Plus all polyfills needed for Edge are also needed for IE11
+import "./Edge.js";
+
+window.CSSVarsPonyfill = {
+	cssVars,
+	resetCssVars,
+};

packages/base/src/features/calendar/Buddhist.js

@@ -0,0 +1 @@
+import "@ui5/webcomponents-core/dist/sap/ui/core/date/Buddhist.js";

packages/base/src/features/calendar/Islamic.js

@@ -0,0 +1 @@
+import "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";

packages/base/src/features/calendar/Japanese.js

@@ -0,0 +1 @@
+import "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";

packages/base/src/features/calendar/Persian.js

@@ -0,0 +1 @@
+import "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";

packages/main/bundle.es5.js

@@ -1,8 +1,8 @@
 // ES5 bundle targets IE11 only
-import "@ui5/webcomponents-base/src/browsersupport/IE11.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/IE11.js";
 
 import * as configuration from "@ui5/webcomponents-base/src/Configuration.js";
-import * as Theming from "@ui5/webcomponents-base/src/Theming.js";
+import * as Theming from "@ui5/webcomponents-base/src/features/Theming.js";
 import "./bundle.esm.js";
 
 export {

packages/main/bundle.esm.js

@@ -1,14 +1,16 @@
+import "@ui5/webcomponents-base/src/features/calendar/Buddhist.js";
+import "@ui5/webcomponents-base/src/features/calendar/Islamic.js";
+import "@ui5/webcomponents-base/src/features/calendar/Japanese.js";
+import "@ui5/webcomponents-base/src/features/calendar/Persian.js";
+
 // ESM bundle targets Edge + browsers with native support
-import "@ui5/webcomponents-base/src/browsersupport/Edge.js";
+import "@ui5/webcomponents-base/src/features/browsersupport/Edge.js";
 
 import "./dist/ThemePropertiesProvider.js";
+import "./dist/MessageBundleAssets.js";
+import "./dist/features/InputElementsFormSupport.js";
+import "./dist/features/InputSuggestions.js";
 
-import "@ui5/webcomponents/dist/MessageBundleAssets.js";
-
-import Buddhist from "@ui5/webcomponents-core/dist/sap/ui/core/date/Buddhist.js";
-import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
-import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
-import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
 
 import Badge from "./dist/Badge.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
@@ -19,7 +21,6 @@ import DatePicker from "./dist/DatePicker.js";
 import Dialog from "./dist/Dialog.js";
 import Icon from "./dist/Icon.js";
 import Input from "./dist/Input.js";
-import InputSuggestions from "./dist/InputSuggestions.js";
 import Label from "./dist/Label.js";
 import Link from "./dist/Link.js";
 import Popover from "./dist/Popover.js";
@@ -45,8 +46,6 @@ import StandardListItem from "./dist/StandardListItem.js";
 import CustomListItem from "./dist/CustomListItem.js";
 import GroupHeaderListItem from "./dist/GroupHeaderListItem.js";
 
-// used for forms
-import InputElementsFormSupport from "./dist/InputElementsFormSupport.js";
 
 // used in test pages
 import RenderScheduler from "@ui5/webcomponents-base/src/RenderScheduler.js";
@@ -57,7 +56,7 @@ window.isIE = isIE; // attached to the window object for testing purposes
 
 // Note: keep in sync with rollup.config value for IIFE
 import * as configuration from "@ui5/webcomponents-base/src/Configuration.js";
-import * as Theming from "@ui5/webcomponents-base/src/Theming.js";
+import * as Theming from "@ui5/webcomponents-base/src/features/Theming.js";
 window["sap-ui-webcomponents-main-bundle"] = {
 	configuration,
 	Theming,

packages/main/lib/postcss-css-to-esm/index.js

@@ -8,7 +8,7 @@ module.exports = postcss.plugin('add css to esm transform plugin', function (opt
 
 	return function (root) {
 		const css = JSON.stringify(root.toString());
-		const targetFile = root.source.input.from.replace("/src/", "/dist/").replace("\\src\\", "\\dist\\");
+		const targetFile = root.source.input.from.replace("/src/", "/dist/generated/").replace("\\src\\", "\\dist\\generated\\");
 
 		mkdirp.sync(path.dirname(targetFile));
 

packages/main/package.json

@@ -46,7 +46,7 @@
   "scripts": {
     "build": "npm-run-all --sequential clean lint build:templates build:samples build:styles copy:src build:bundle copy:i18n copy:webcomponents-polyfill ",
     "build:bundle": "rollup -c --environment ES5_BUILD",
-    "build:templates": "mkdirp src/build/compiled && node ./lib/hbs2ui5/index.js -d src/ -o src/build/compiled",
+    "build:templates": "mkdirp dist/generated/templates && node ./lib/hbs2ui5/index.js -d src/ -o dist/generated/templates",
     "build:samples": "npm run copy:test --scripts-prepend-node-path && npm run build:api --scripts-prepend-node-path && npm run build:docs --scripts-prepend-node-path && node lib/playground/index.js",
     "build:pages": "npm run copy:pages",
     "build:qunit": "npm run copy:qunit",
@@ -57,7 +57,7 @@
     "build:styles-components": "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
     "watch:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/ -w",
     "watch:styles-components": "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/ -w",
-    "clean": "rimraf dist src/build",
+    "clean": "rimraf dist",
     "copy:src": "copy-and-watch \"src/**/*.js\" \"src/**/i18n/*.json\" dist/",
     "copy:i18n": "cpx \"src/i18n/*.json\" dist/i18n",
     "copy:test": "cpx \"test/**/*.*\" dist/test-resources",

packages/main/rollup.config.js

@@ -134,7 +134,7 @@ const getDerivedColorsConfig = (theme) => {
 	return {
 		input: `src/themes/${theme}/derived-colors.js`,
 		output: {
-			dir: `dist/themes/${theme}/`,
+			dir: `dist/generated/themes/${theme}/`,
 			format: "esm",
 			sourcemap: true
 		},

packages/main/src/Badge.js

@@ -4,10 +4,10 @@ import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js
 import Icon from "./Icon.js";
 
 // Template
-import BadgeTemplate from "./build/compiled/BadgeTemplate.lit.js";
+import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
 // Styles
-import badgeCss from "./themes/Badge.css.js";
+import badgeCss from "./generated/themes/Badge.css.js";
 
 /**
  * @public

packages/main/src/BusyIndicator.js

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
-import BusyIndicatorTemplate from "./build/compiled/BusyIndicatorTemplate.lit.js";
+import BusyIndicatorTemplate from "./generated/templates/BusyIndicatorTemplate.lit.js";
 
 // Styles
-import busyIndicatorCss from "./themes/BusyIndicator.css.js";
+import busyIndicatorCss from "./generated/themes/BusyIndicator.css.js";
 
 
 import BusyIndicatorType from "./types/BusyIndicatorType.js";

packages/main/src/Button.js

@@ -5,11 +5,11 @@ import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
 import { getFeature } from "@ui5/webcomponents-base/src/FeaturesRegistry.js";
 import ButtonDesign from "./types/ButtonDesign.js";
-import ButtonTemplate from "./build/compiled/ButtonTemplate.lit.js";
+import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
 
 // Styles
-import buttonCss from "./themes/Button.css.js";
+import buttonCss from "./generated/themes/Button.css.js";
 
 /**
  * @public
@@ -81,7 +81,7 @@ const metadata = {
 		 * automatically submit the nearest form element upon <code>press</code>.
 		 *
 		 * <b>Important:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/InputElementsFormSupport.js";</code>
+		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -185,7 +185,7 @@ class Button extends UI5Element {
 	onBeforeRendering() {
 		const FormSupport = getFeature("FormSupport");
 		if (this.submits && !FormSupport) {
-			console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/InputElementsFormSupport.js";`); // eslint-disable-line
+			console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 	}
 

packages/main/src/Calendar.js

@@ -15,13 +15,13 @@ import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
-import CalendarTemplate from "./build/compiled/CalendarTemplate.lit.js";
+import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.js";
 
 // default calendar for bundling
 import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian.js";
 
 // Styles
-import calendarCSS from "./themes/Calendar.css.js";
+import calendarCSS from "./generated/themes/Calendar.css.js";
 
 /**
  * @public

packages/main/src/CalendarHeader.js

@@ -6,10 +6,10 @@ import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
 import Button from "./Button.js";
 import ButtonDesign from "./types/ButtonDesign.js";
-import CalendarHeaderTemplate from "./build/compiled/CalendarHeaderTemplate.lit.js";
+import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
 
 // Styles
-import styles from "./themes/CalendarHeader.css.js";
+import styles from "./generated/themes/CalendarHeader.css.js";
 
 
 const metadata = {

packages/main/src/Card.js

@@ -3,11 +3,11 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 import { isIconURI } from "@ui5/webcomponents-base/src/IconPool.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import getEffectiveRTL from "@ui5/webcomponents-base/src/util/getEffectiveRTL.js";
-import CardTemplate from "./build/compiled/CardTemplate.lit.js";
+import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
 // Styles
-import cardCss from "./themes/Card.css.js";
+import cardCss from "./generated/themes/Card.css.js";
 
 /**
  * @public