@ui5/webcomponents-tools 0.0.0-fb61e9889 → 0.0.0-fd6264051

package/CHANGELOG.md

@@ -3,6 +3,80 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* correct scoping issues with several components ([#4820](https://github.com/SAP/ui5-webcomponents/issues/4820)) ([621dc20](https://github.com/SAP/ui5-webcomponents/commit/621dc20))
+* display methods in child components API ([#4792](https://github.com/SAP/ui5-webcomponents/issues/4792)) ([1929d08](https://github.com/SAP/ui5-webcomponents/commit/1929d08))
+
+
+### Features
+
+* **jsdoc:** remove attr name for Object props ([#4680](https://github.com/SAP/ui5-webcomponents/issues/4680)) ([1741bd6](https://github.com/SAP/ui5-webcomponents/commit/1741bd6)), closes [#4674](https://github.com/SAP/ui5-webcomponents/issues/4674)
+
+
+
+
+
+## [1.1.2](https://github.com/SAP/ui5-webcomponents/compare/v1.1.1...v1.1.2) (2022-01-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.1.1](https://github.com/SAP/ui5-webcomponents/compare/v1.1.0...v1.1.1) (2022-01-24)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.1.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.2...v1.1.0) (2022-01-21)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.2](https://github.com/SAP/ui5-webcomponents/compare/v1.0.1...v1.0.2) (2021-11-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.1](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0...v1.0.1) (2021-11-10)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.0.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.16...v1.0.0) (2021-11-10)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+# [1.0.0-rc.16](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.15...v1.0.0-rc.16) (2021-11-09)
+
+
+
+### Features
+
+* **tools:** create an npm init script ([#4090](https://github.com/SAP/ui5-webcomponents/issues/4090)) ([5608e04](https://github.com/SAP/ui5-webcomponents/commit/5608e04))
+
+
+
 # [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
 
 

package/README.md

@@ -17,7 +17,7 @@ used by other UI5 Web Components packages, such as `main` and `fiori`.
 We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.

package/assets-meta.js

@@ -9,7 +9,11 @@ const assetsMeta = {
       "sap_belize_hcw",
       "sap_fiori_3_hcb",
       "sap_fiori_3_hcw",
-	  "sap_horizon"
+	  "sap_horizon",
+	  "sap_horizon_dark",
+	  "sap_horizon_hcb",
+	  "sap_horizon_hcw",
+	  "sap_horizon_exp"
     ]
   },
   "languages": {

package/components-package/postcss.themes.js

@@ -3,6 +3,9 @@ const combineSelectors = require('postcss-combine-duplicated-selectors');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
 const cssnano = require('cssnano');
+const fs = require("fs");
+
+const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
 	plugins: [
@@ -17,7 +20,7 @@ module.exports = {
 				},
 			]
 		},),
-		postcssCSStoJSON({toReplace: 'src'}),
-		postcssCSStoESM({toReplace: 'src'}),
+		postcssCSStoJSON({toReplace: 'src', packageName}),
+		postcssCSStoESM({toReplace: 'src', packageName}),
 	]
 };

package/components-package/rollup.js

@@ -7,7 +7,8 @@ const url = require("@rollup/plugin-url");
 const { terser } = require("rollup-plugin-terser");
 const json = require("@rollup/plugin-json");
 const replace = require("@rollup/plugin-replace");
-const colors = require("colors/safe");
+const commonjs = require("@rollup/plugin-commonjs");
+const colors = require("cli-color");
 const filesize = require("rollup-plugin-filesize");
 const livereload = require("rollup-plugin-livereload");
 const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
@@ -137,10 +138,11 @@ const getPlugins = ({ transpile }) => {
 	}
 
 	if (transpile) {
+		plugins.push(commonjs());
 		plugins.push(babel({
 			presets: ["@babel/preset-env"],
 			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
-			sourcemap: true,
+			sourcemap: false,
 			babelHelpers: "bundled",
 		}));
 	}

package/components-package/wdio.js

@@ -168,6 +168,21 @@ exports.config = {
 			}, this);
 		}, true);
 
+		await browser.addCommand("isFocusedDeepElement", async function (element) {
+			return browser.executeAsync(function (elem, element, done) {
+				let activeElement = document.activeElement;
+
+				while (activeElement.shadowRoot) {
+					if (activeElement.shadowRoot.activeElement) {
+						activeElement = activeElement.shadowRoot.activeElement;
+					} else {
+						break;
+					}
+				}
+				done(element === activeElement);
+			}, this, element);
+		}, true);
+
 		await browser.addCommand("setProperty", async function(property, value) {
 			return browser.executeAsync((elem, property, value, done) => {
 				elem[property] = value;
@@ -230,6 +245,7 @@ exports.config = {
 			"isExisting",
 			"isFocused",
 			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
 			"shadow$",
 			"shadow$$",
 		];

package/components-package/wdio.sync.js

@@ -168,6 +168,21 @@ exports.config = {
 			}, this);
 		}, true);
 
+		browser.addCommand("isFocusedDeepElement", function (element) {
+			return browser.execute(function (elem, element, done) {
+				let activeElement = document.activeElement;
+
+				while (activeElement.shadowRoot) {
+					if (activeElement.shadowRoot.activeElement) {
+						activeElement = activeElement.shadowRoot.activeElement;
+					} else {
+						break;
+					}
+				}
+				done(element === activeElement);
+			}, this, element);
+		}, true);
+
 		browser.addCommand("setProperty", function(property, value) {
 			return browser.execute((elem, property, value) => {
 				return elem[property] = value;
@@ -223,6 +238,7 @@ exports.config = {
 			"isExisting",
 			"isFocused",
 			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
 			"shadow$",
 			"shadow$$",
 		];

package/icons-collection/nps.js

@@ -7,15 +7,49 @@ const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date.
 
 const LIB = path.join(__dirname, `../lib/`);
 
+const createIconImportsCommand = (options) => {
+	if (!options.versions) {
+		return `node "${LIB}/create-icons/index.js" "${options.collectionName}"`;
+	}
+
+	const command  = { default: "nps" };
+	options.versions.forEach((v) => {
+		command.default += ` build.icons.create${v}`;
+		command[`create${v}`] = `node "${LIB}/create-icons/index.js" "${options.collectionName}" "${v}"`;
+	});
+
+	return command;
+}
+
+const copyIconAssetsCommand = (options) => {
+	if (!options.versions) {
+		return 	{
+			default: "nps copy.json-imports copy.icon-collection",
+			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`,
+		}
+	}
+
+	const command  = {
+		default: "nps copy.json-imports ",
+		"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+	};
+
+	options.versions.forEach((v) => {
+		command.default += ` copy.icon-collection${v}`;
+		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" dist/generated/assets/${v}/`;
+	});
+
+	return command;
+}
+
 const getScripts = (options) => {
+	const createJSImportsCmd = createIconImportsCommand(options);
+	const copyAssetsCmd = copyIconAssetsCommand(options);
 
 	const scripts = {
 		clean: "rimraf dist",
-		copy: {
-			default: "nps copy.json-imports copy.icon-collection",
-			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
-			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`
-		},
+		copy: copyAssetsCmd,
 		build: {
 			default: `${UP_TO_DATE} || nps clean copy build.i18n build.icons build.jsonImports hash`,
 			i18n: {
@@ -27,7 +61,7 @@ const getScripts = (options) => {
 				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.i18n",
 				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
 			},
-			icons: `node "${LIB}/create-icons/index.js" "${options.collectionName}"`,
+			icons: createJSImportsCmd,
 		},
 		hash: `node "${generateHash}" dist/ hash.txt`,
 	};

package/lib/create-icons/index.js

@@ -3,12 +3,13 @@ const path = require("path");
 const mkdirp = require("mkdirp");
 
 const collectionName = process.argv[2] || "SAP-icons";
-const srcFile = path.normalize(`src/${collectionName}.json`);
-const destDir = path.normalize("dist/");
+const collectionVersion = process.argv[3];
+const srcFile = collectionVersion ? path.normalize(`src/${collectionVersion}/${collectionName}.json`) : path.normalize(`src/${collectionName}.json`);
+const destDir = collectionVersion ? path.normalize(`dist/${collectionVersion}/`) : path.normalize("dist/");
 
 mkdirp.sync(destDir);
 
-const template = (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/dist/asset-registries/Icons.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
@@ -21,8 +22,8 @@ registerIcon(name, { pathData, ltr, collection, packageName });
 export default { pathData };`;
 
 
-const accTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
-import { ${accData.key} } from "./generated/i18n/i18n-defaults.js";
+const iconAccTemplate = (name, pathData, ltr, accData, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { ${accData.key} } from "../generated/i18n/i18n-defaults.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
@@ -35,6 +36,15 @@ registerIcon(name, { pathData, ltr, accData, collection, packageName });
 
 export default { pathData, accData };`;
 
+
+
+const collectionTemplate = (name) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import pathDataV4 from "./v5/${name}.js";
+import pathDataV5 from "./v4/${name}.js";
+const pathData = isThemeFamily("sap_horizon") ? pathDataV5 : pathDataV4;
+export default { pathData };`;
+
+
 const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 	<path d="${pathData}"/>
 </svg>`;
@@ -48,10 +58,14 @@ const createIcons = (file) => {
 		const ltr = !!iconData.ltr;
 		const acc = iconData.acc;
 
-		const content = acc ? accTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : template(name, pathData, ltr, json.collection, json.packageName);
+		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.packageName);
 
 		fs.writeFileSync(path.join(destDir, `${name}.js`), content);
 		fs.writeFileSync(path.join(destDir, `${name}.svg`), svgTemplate(pathData));
+
+		if (json.version) {
+			fs.writeFileSync(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name));
+		}
 	}
 };
 

package/lib/create-illustrations/index.js

@@ -6,6 +6,51 @@ if (process.argv.length < 7) {
 	return;
 }
 
+const ORIGINAL_TEXTS = {
+	UnableToLoad: "UnableToLoad",
+	UnableToUpload: "UnableToUpload",
+	NoActivities: "NoActivities",
+	BeforeSearch: "BeforeSearch",
+	NoSearchResults: "NoSearchResults",
+	NoEntries: "NoEntries",
+	NoData: "NoData",
+	NoNotifications: "NoNotifications",
+	BalloonSky: "BalloonSky",
+	SuccessScreen: "SuccessScreen",
+	NoMail: "NoMail",
+	NoSavedItems: "NoSavedItems",
+	NoTasks: "NoTasks"
+};
+
+const FALLBACK_TEXTS = {
+	ReloadScreen: ORIGINAL_TEXTS.UnableToLoad,
+	Connection: ORIGINAL_TEXTS.UnableToLoad,
+	ErrorScreen: ORIGINAL_TEXTS.UnableToUpload,
+	EmptyCalendar: ORIGINAL_TEXTS.NoActivities,
+	SearchEarth: ORIGINAL_TEXTS.BeforeSearch,
+	SearchFolder: ORIGINAL_TEXTS.NoSearchResults,
+	EmptyList: ORIGINAL_TEXTS.NoEntries,
+	Tent: ORIGINAL_TEXTS.NoData,
+	SleepingBell: ORIGINAL_TEXTS.NoNotifications,
+	SimpleBalloon: ORIGINAL_TEXTS.BalloonSky,
+	SimpleBell: ORIGINAL_TEXTS.NoNotifications,
+	SimpleCalendar: ORIGINAL_TEXTS.NoActivities,
+	SimpleCheckMark: ORIGINAL_TEXTS.SuccessScreen,
+	SimpleConnection: ORIGINAL_TEXTS.UnableToLoad,
+	SimpleEmptyDoc: ORIGINAL_TEXTS.NoData,
+	SimpleEmptyList: ORIGINAL_TEXTS.NoEntries,
+	SimpleError: ORIGINAL_TEXTS.UnableToUpload,
+	SimpleMagnifier: ORIGINAL_TEXTS.BeforeSearch,
+	SimpleMail: ORIGINAL_TEXTS.NoMail,
+	SimpleNoSavedItems: ORIGINAL_TEXTS.NoSavedItems,
+	SimpleNotFoundMagnifier: ORIGINAL_TEXTS.NoSearchResults,
+	SimpleReload: ORIGINAL_TEXTS.UnableToLoad,
+	SimpleTask: ORIGINAL_TEXTS.NoTasks,
+	SuccessBalloon: ORIGINAL_TEXTS.BalloonSky,
+	SuccessCheckMark: ORIGINAL_TEXTS.SuccessScreen,
+	SuccessHighFive: ORIGINAL_TEXTS.BalloonSky
+};
+
 const srcPath = process.argv[2];
 const defaultText = process.argv[3] === "true";
 const illustrationsPrefix = process.argv[4];
@@ -24,21 +69,31 @@ const svgToJs = fileName => {
 	fs.writeFileSync(path.join(destPath, fileName), fileContent);
 };
 const illustrationImportTemplate = illustrationName => {
-	const illustationNameUpperCase = illustrationName.toUpperCase();
+	let illustrationNameForTranslation = illustrationName;
+
+	if (defaultText) {
+		if (FALLBACK_TEXTS[illustrationNameForTranslation]) {
+			illustrationNameForTranslation = FALLBACK_TEXTS[illustrationNameForTranslation];
+		} else if (illustrationName.indexOf("_v") !== -1) {
+			illustrationNameForTranslation = illustrationNameForTranslation.substr(0, illustrationNameForTranslation.indexOf('_v'));
+		}
+	}
 
+	const illustrationNameUpperCase = illustrationNameForTranslation.toUpperCase();
+	
 	return defaultText ? `import { registerIllustration } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
 import dialogSvg from "./${illustrationsPrefix}-Dialog-${illustrationName}.js";
 import sceneSvg from "./${illustrationsPrefix}-Scene-${illustrationName}.js";
 import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
 import {
-	IM_TITLE_${illustationNameUpperCase},
-	IM_SUBTITLE_${illustationNameUpperCase},
+	IM_TITLE_${illustrationNameUpperCase},
+	IM_SUBTITLE_${illustrationNameUpperCase},
 } from "../generated/i18n/i18n-defaults.js";
 
 const name = "${illustrationName}";
 const set = "${illustrationSet}";
-const title = IM_TITLE_${illustationNameUpperCase};
-const subtitle = IM_SUBTITLE_${illustationNameUpperCase};
+const title = IM_TITLE_${illustrationNameUpperCase};
+const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};
 
 registerIllustration(name, {
 	dialogSvg,

package/lib/documentation/templates/api-properties-section.js

@@ -21,7 +21,9 @@ module.exports = {
               {{/if}}
                 <br>
               {{#if (toKebabCase this.name)}}
-                <code>{{toKebabCase this.name}}</code>
+                  {{#unless this.noattribute}}
+                     <code>{{toKebabCase this.name}}</code>
+                 {{/unless}}
               {{/if}}
             </div>
             <div class="cell api-table-content-cell">{{this.type}}</div>

package/lib/documentation/templates/template.js

@@ -23,6 +23,7 @@ module.exports = {
             {{> properties this}}
             {{> slots this}}
             {{> events this}}
+            {{> methods this}}
             {{> cssVariables this}} 
           </section>
         </section>
@@ -33,6 +34,6 @@ module.exports = {
         <a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
         <a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
       </div>
-      <img src="../../../../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
+      <img src="../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
     </footer>`
 };

package/lib/hbs2lit/src/litVisitor2.js

@@ -8,6 +8,9 @@ let skipIfDefined = false;
 // when true => an HTML node value, when false => an attribute value
 let isNodeValue = false;
 
+// when true => the current attribute is "style"
+let isStyleAttribute = false;
+
 // matches event handlers @click= and boolean attrs ?disabled=
 const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
 
@@ -77,6 +80,12 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
 		isNodeValue = closingIndex > openingIndex;
 	}
 
+	isStyleAttribute = !isNodeValue && contentStatement.match(/style *= *["']? *$/);
+
+	if (!isStyleAttribute && contentStatement.match(/style=/)) {
+		console.log("WARNING: style hard-coded", contentStatement);
+	}
+
 	// Scope custom element tags
 	contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
 
@@ -91,7 +100,6 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
 	} else {
 		const path = normalizePath.call(this, mustache.path.original);
 		const hasCalculatingClasses = path.includes("context.classes");
-		const hasStylesCalculation = path.includes("context.styles");
 
 		let parsedCode = "";
 
@@ -99,7 +107,7 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
 			parsedCode = `\${unsafeHTML(${path})}`;
 		} else if (hasCalculatingClasses) {
 			parsedCode = `\${classMap(${path})}`;
-		} else if (hasStylesCalculation) {
+		} else if (isStyleAttribute) {
 			parsedCode = `\${styleMap(${path})}`;
 		} else if (skipIfDefined){
 			parsedCode = `\${${path}}`;

package/lib/jsdoc/plugin.js

@@ -33,6 +33,8 @@
  *
  *   native
  *
+ *   noattribute
+ *
  *   allowPreventDefault
  *
  * It furthermore listens to the following JSDoc3 events to implement additional functionality
@@ -2099,6 +2101,13 @@ exports.defineTags = function(dictionary) {
 			doclet.native = true;
 		}
 	});
+
+	dictionary.defineTag('noattribute', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.noattribute = true;
+		}
+	});
 };
 
 exports.handlers = {

package/lib/jsdoc/template/publish.js

@@ -2804,6 +2804,10 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 						attrib("export", undefined, '', true);
 					}
 
+					if (member.noattribute) {
+						attrib("noattribute", true);
+					}
+
 					if (member.readonly) {
 						attrib("readonly", member.readonly, null);
 					}
@@ -2815,7 +2819,14 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 					if ( member.since ) {
 						attrib("since", extractVersion(member.since));
 					}
-					attrib("type", listTypes(member.type));
+
+					var type = listTypes(member.type);
+					attrib("type", type);
+
+					if ((type === "object" || type === "Object") && visibility(member) === "public") {
+						attrib("noattribute", true);
+					}
+
 					tag("description", normalizeWS(member.description), true);
 					if (member.defaultvalue) {
 						attrib("defaultValue", member.defaultvalue);
@@ -3854,7 +3865,7 @@ function createAPIJS(symbols, filename) {
 
 	var output = [];
 
-	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
+	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
 
 	function isNoKeyword($) { return !rkeywords.test($.name); }
 

package/lib/postcss-css-to-esm/index.js

@@ -8,10 +8,10 @@ const DEFAULT_THEME = assets.themes.default;
 const getDefaultThemeCode = packageName => {
 	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
-import defaultThemeBase from "@ui5/webcomponents-theme-base/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
+import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
 import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
 
-registerThemePropertiesLoader("@ui5/webcomponents-theme-base", "${DEFAULT_THEME}", () => defaultThemeBase);
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
 registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
 `;
 };
@@ -38,8 +38,8 @@ module.exports = function (opts) {
 
 			const filePath = `${targetFile}.js`;
 			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-			fs.writeFileSync(filePath, `${defaultTheme}export default ${css};`);
+			fs.writeFileSync(filePath, `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`);
 		}
 	};
 };
-module.exports.postcss = true;
+module.exports.postcss = true;

package/lib/postcss-css-to-json/index.js

@@ -23,9 +23,14 @@ module.exports = function (opts) {
 			mkdirp.sync(path.dirname(targetFile));
 
 			const filePath = `${targetFile}.json`;
-			fs.writeFileSync(filePath, JSON.stringify({_: css}));
+			const data = {
+				packageName: opts.packageName,
+				fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
+				content: css
+			};
+			fs.writeFileSync(filePath, JSON.stringify({_: data}));
 		}
 	};
 };
 
-module.exports.postcss = true;
+module.exports.postcss = true;

package/lib/scoping/missing-dependencies.js

@@ -0,0 +1,65 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+const projectPath = process.argv[2];
+
+// gather all tags from all files
+const tagsToFiles = new Map();
+const filesToTags = new Map();
+
+let files = [
+	...glob.sync(path.join("packages/main/src/**/*.js")),
+	...glob.sync(path.join("packages/fiori/src/**/*.js")),
+];
+files.forEach(file => {
+	let matches = file.match(/([a-zA-Z0-9_]+)\.js$/);
+	const name = matches[1];
+
+	const content = `${fs.readFileSync(file)}`;
+	matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		const tag = matches[1];
+		tagsToFiles.set(tag, name);
+		filesToTags.set(name, tag);
+	}
+});
+
+// Process the package
+files = glob.sync(path.join(projectPath, "src/**/*.js"));
+tagsToFiles.forEach((file, tag) => {
+	const sourcePath = path.join(projectPath, "src/", `${file}.js`);
+	if (!fs.existsSync(sourcePath)) {
+		return;
+	}
+	const sourceContent = `${fs.readFileSync(sourcePath)}`.split("\n").join(" ");
+
+	const hbsPath = path.join(projectPath, "src/", `${file}.hbs`);
+	const hbsContent = fs.existsSync(hbsPath) ? `${fs.readFileSync(hbsPath)}` : "";
+
+	const hbsPopoverPath = path.join(projectPath, "src/", `${file}Popover.hbs`);
+	const hbsPopoverContent = fs.existsSync(hbsPopoverPath) ? `${fs.readFileSync(hbsPopoverPath)}` : "";
+
+	// deps
+	let deps = [];
+	let matches = sourceContent.match(/static get dependencies\(\) \{\s+return \[(.*?)\]/);
+	if (matches) {
+		deps = matches[1].split(",").map(x => x.trim()).filter(x => !!x);
+	}
+
+	// tags
+	matches = [
+		...hbsContent.matchAll(/<ui5-[a-z0-9-]+/g),
+		...hbsPopoverContent.matchAll(/<ui5-[a-z0-9-]+/g),
+	];
+	if (matches) {
+		matches.forEach(match => {
+			const tagUsed = match[0].substr(1);
+			const dep = tagsToFiles.get(tagUsed);
+			if (!deps.includes(dep)) {
+				console.log(`${file} used ${tagUsed}`);
+			}
+		});
+	}
+});

package/lib/scoping/report-tags-usage.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+// gather all tags from all files
+const tags = new Set();
+const files = glob.sync(path.join(process.argv[2], "src/**/*.js"));
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		tags.add(matches[1]);
+	}
+});
+
+// report all usages of any tag within any file, which is not the tag definition and is not hasAttribute
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const lines = content.split("\n");
+	lines.forEach(line => {
+		tags.forEach(tag => {
+			if (line.includes(`"${tag}"`) && !line.includes(`tag: "${tag}",`) && !line.includes(`hasAttribute("${tag}")`)) {
+				console.log(`${file}: ${line.trim()}`);
+			}
+		});
+	});
+});

package/lib/serve/index.js

@@ -2,7 +2,7 @@ const fs = require("fs");
 const path = require("path");
 const commandLineArgs = require("command-line-args");
 const { exec } = require("child_process");
-const colors = require("colors/safe");
+const colors = require("cli-color");
 const isPortReachable = require("is-port-reachable");
 
 const options = commandLineArgs([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-fb61e9889",
+  "version": "0.0.0-fd6264051",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -25,6 +25,7 @@
     "@babel/preset-env": "^7.13.10",
     "@openui5/sap.ui.core": "1.95.0",
     "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
@@ -39,7 +40,7 @@
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
-    "colors": "^1.4.0",
+    "cli-color": "^2.0.1",
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
@@ -59,10 +60,10 @@
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
     "nps": "^5.10.0",
-    "postcss": "^8.2.10",
-    "postcss-cli": "^9.0.1",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^14.0.0",
+    "postcss-import": "^14.0.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",