@ui5/webcomponents-tools 0.0.0-96e98c995 → 0.0.0-974b11d82

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.11.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.2...v1.11.0-rc.3) (2023-02-23)
+
+
+### Features
+
+* **playground:** next playground with storybook ([#5831](https://github.com/SAP/ui5-webcomponents/issues/5831)) ([79274c8](https://github.com/SAP/ui5-webcomponents/commit/79274c8e442cf5854a7fe6327f25aaed04312103)), closes [#5898](https://github.com/SAP/ui5-webcomponents/issues/5898)
+
+
+
+
+
+# [1.11.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.1...v1.11.0-rc.2) (2023-02-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.0...v1.11.0-rc.1) (2023-02-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.4-rc.0...v1.11.0-rc.0) (2023-02-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.10.4-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.3...v1.10.4-rc.0) (2023-01-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 ## [1.10.3](https://github.com/SAP/ui5-webcomponents/compare/v1.10.2...v1.10.3) (2023-01-25)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/components-package/nps.js

@@ -8,14 +8,17 @@ const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
 	const illustrationsData = options.illustrationsData || [];
-	illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
 	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
 	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
 	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
-	const tsCommand = options.typescript ? "tsc" : "";
-	const tsWatchCommand = options.typescript ? "tsc --watch" : "";
+	const tsOption = options.typescript;
+	const tsCommand = tsOption ? "tsc" : "";
+	const tsWatchCommand = tsOption ? "tsc --watch" : "";
+	const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
+	const copySrcGenerated = tsOption ? "" : "copy.srcGenerated";
 
 	let viteConfig;
 	if (fs.existsSync("config/vite.config.js")) {
@@ -42,26 +45,26 @@ const getScripts = (options) => {
 	}
 
 	const scripts = {
-		clean: 'rimraf jsdoc-dist && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		clean: 'rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
 		lint: `eslint . ${eslintConfig}`,
 		lintfix: `eslint . ${eslintConfig}`,
 		prepare: {
-			default: "nps clean prepare.all generateAPI",
-			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps typescript" "nps build.illustrations"',
+			default: `${tsCrossEnv} nps clean prepare.all typescript generateAPI`,
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.illustrations"',
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
 		},
 		typescript: tsCommand,
 		build: {
-			default: "nps lint prepare build.bundle",
+			default: "nps prepare lint build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
 			styles: {
-				default: "nps build.styles.themes build.styles.components",
+				default: `nps build.styles.themes build.styles.components ${copySrcGenerated}`,
 				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
 				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
+				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
 				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
@@ -79,10 +82,11 @@ const getScripts = (options) => {
 		copy: {
 			default: "nps copy.src copy.props",
 			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			srcGenerated: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.js" dist/generated/`,
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
+			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
 			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			typescript: tsWatchCommand,

package/components-package/postcss.components.js

@@ -6,16 +6,16 @@ const fs = require("fs");
 const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
-	plugins: [
-		postcssImport(),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-				},
-			]
-		}),
-		postcssCSStoESM({toReplace: 'src', includeDefaultTheme: true, packageName}),
-	]
-};
+		plugins: [
+			postcssImport(),
+			cssnano({
+				preset: [
+					'default', {
+						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
+						mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
+					},
+				]
+			}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+		]
+}

package/components-package/postcss.themes.js

@@ -8,19 +8,19 @@ const fs = require("fs");
 const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
-	plugins: [
-		postcssImport(),
-		combineSelectors({
-			removeDuplicatedProperties: true
-		}),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-				},
-			]
-		},),
-		postcssCSStoJSON({toReplace: 'src', packageName}),
-		postcssCSStoESM({toReplace: 'src', packageName}),
-	]
+		plugins: [
+			postcssImport(),
+			combineSelectors({
+				removeDuplicatedProperties: true
+			}),
+			cssnano({
+				preset: [
+					'default', {
+						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
+					},
+				]
+			},),
+			postcssCSStoJSON({ toReplace: 'src', packageName }),
+			postcssCSStoESM({ toReplace: 'src', packageName }),
+		]
 };

package/icons-collection/nps.js

@@ -41,15 +41,17 @@ const copyIconAssetsCommand = (options) => {
 const getScripts = (options) => {
 	const createJSImportsCmd = createIconImportsCommand(options);
 	const copyAssetsCmd = copyIconAssetsCommand(options);
+	const tsCommand = options.typescript ? "tsc" : "";
+	const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
 
 	const scripts = {
-		clean: "rimraf dist",
+		clean: "rimraf dist && rimraf src/generated",
 		copy: copyAssetsCmd,
 		build: {
-			default: `nps clean typescript copy build.i18n build.icons build.jsonImports`,
+			default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
+				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
 				json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
@@ -58,7 +60,7 @@ const getScripts = (options) => {
 			},
 			icons: createJSImportsCmd,
 		},
-		typescript: "tsc",
+		typescript: tsCommand,
 	};
 
 	return scripts;

package/lib/create-icons/index.js

@@ -1,7 +1,7 @@
 const fs = require("fs").promises;
 const path = require("path");
 
-const collectionName = process.argv[2] || "SAP-icons";
+const collectionName = process.argv[2] || "SAP-icons-v4";
 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/");
@@ -38,13 +38,13 @@ export { pathData, ltr, accData };`;
 
 
 
-const collectionTemplate = (name) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import {pathData as pathDataV5, ltr, accData} from "./v5/${name}.js";
-import {pathData as pathDataV4} from "./v4/${name}.js";
+const collectionTemplate = (name, versions, fullName) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { pathData as pathData${versions[0]}, ltr, accData } from "./${versions[0]}/${name}.js";
+import { pathData as pathData${versions[1]} } from "./${versions[1]}/${name}.js";
 
-const pathData = isThemeFamily("sap_horizon") ? pathDataV5 : pathDataV4;
+const pathData = isThemeFamily("sap_horizon") ? pathData${versions[1]} : pathData${versions[0]};
 
-export default "${name}";
+export default "${fullName}";
 export { pathData, ltr, accData };`;
 
 
@@ -80,22 +80,45 @@ const createIcons = async (file) => {
 		const pathData = iconData.path;
 		const ltr = !!iconData.ltr;
 		const acc = iconData.acc;
+		const packageName =  json.packageName;
+		const collection =  json.collection;
 
-		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.packageName);
+		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
 
 		promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
 		promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
-		promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, json.collection)));
+		promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, collection)));
+
+		// For versioned icons collections, the script creates top level (unversioned) module that internally imports the versioned ones.
+		// For example, the top level "@ui5/ui5-webcomponents-icons/dist/accept.js" imports:
+		// - "@ui5/ui5-webcomponents-icons/dist/v5/accept.js" 
+		// - "@ui5/ui5-webcomponents-icons/dist/v4/accept.js"
 
 		if (json.version) {
-			promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name)));
-            promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(name, acc)));
+			// The exported value from the top level (unversioned) icon module depends on whether the collection is the default,
+			// to add or not the collection name to the exported value:
+			// For the default collection (SAPIcons) we export just the icon name - "export default { 'accept' }"
+			// For non-default collections (SAPTNTIcons and SAPBSIcons) we export the full name - "export default { 'tnt/actor' }"
+			const effectiveName = isDefaultCollection(collection) ? name : getUnversionedFullIconName(name, collection);
+			promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name, json.versions, effectiveName)));
+            promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(effectiveName, acc)));
 		}
 	}
 
 	return Promise.all(promises);
 };
 
+const isDefaultCollection = collectionName => collectionName === "SAP-icons-v4"  || collectionName === "SAP-icons-v5";
+const getUnversionedFullIconName = (name, collection) => `${getUnversionedCollectionName(collection)}/${name}`;
+const getUnversionedCollectionName = collectionName => CollectionVersionedToUnversionedMap[collectionName] || collectionName;
+
+const CollectionVersionedToUnversionedMap = {
+	"tnt-v2": "tnt",
+	"tnt-v3": "tnt",
+	"business-suite-v1": "business-suite",
+	"business-suite-v2": "business-suite",
+};
+
 createIcons(srcFile).then(() => {
 	console.log("Icons created.");
 });

package/lib/i18n/defaults.js

@@ -8,7 +8,9 @@ const generate = async () => {
 
 	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
 	const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
-	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
+	const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
+
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
 
 	if (!messageBundle || !outputFile) {
 		return;
@@ -45,6 +47,9 @@ const generate = async () => {
 		let effectiveValue = defaultLanguageValue || value;
 		effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
 
+		if (tsMode) {
+			return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
+		}
 		return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
 	};
 
@@ -62,7 +67,9 @@ const generate = async () => {
 		const textKeys = Object.keys(properties);
 		const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
 
-		return `${texts}
+		// tabs are intentionally mixed to have proper identation in the produced file
+		return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
+${texts}
 export {${textKeys.join()}};`;
 	};
 

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

@@ -11,11 +11,38 @@ const getDefaultThemeCode = packageName => {
 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-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
-registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
+registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
 `;
 };
 
+const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
+	if (tsMode) {
+		return getTSContent(targetFile, packageName, css, includeDefaultTheme);
+	}
+
+	return getJSContent(targetFile, packageName, css, includeDefaultTheme);
+}
+
+const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	// tabs are intentionally mixed to have proper identation in the produced file
+	return `${typeImport}
+${defaultTheme}
+const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
+export default styleData;
+	`;
+}
+
+const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+}
+
+
 const proccessCSS = css => {
 	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
 	css = css.replace(/\.background-image.*{.*}/, "");
@@ -27,18 +54,23 @@ const proccessCSS = css => {
 module.exports = function (opts) {
 	opts = opts || {};
 
+	const packageName = opts.packageName;
+	const includeDefaultTheme = opts.includeDefaultTheme;
+	const toReplace = opts.toReplace;
+
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
 		Once (root) {
+			const tsMode = process.env.UI5_TS === "true";
+
 			let css = root.toString();
 			css = proccessCSS(css);
 
-			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
+			const targetFile = root.source.input.from.replace(`/${toReplace}/`, "/src/generated/").replace(`\\${toReplace}\\`, "\\src\\generated\\");
 			mkdirp.sync(path.dirname(targetFile));
 
-			const filePath = `${targetFile}.js`;
-			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-			
+			const filePath = `${targetFile}.${tsMode ? "ts" : "js"}`;
+		
 			// it seems slower to read the old content, but writing the same content with no real changes
 			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
 			let oldContent = "";
@@ -47,7 +79,8 @@ module.exports = function (opts) {
 			} catch (e) {
 				// file not found
 			}
-			const content = `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+
+			const content = getFileContent(tsMode, filePath, packageName, css, includeDefaultTheme);
 			if (content !== oldContent) {
 				fs.writeFileSync(filePath, content);
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-96e98c995",
+  "version": "0.0.0-974b11d82",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -62,7 +62,7 @@
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^2.9.12",
+    "vite": "^3.0.4",
     "wdio-chromedriver-service": "^7.3.2",
     "zx": "^4.3.0"
   },