@ui5/webcomponents-tools 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/components-package/wdio.sync.js

@@ -0,0 +1,360 @@
+exports.config = {
+	//
+	// ====================
+	// Runner Configuration
+	// ====================
+	//
+	// WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
+	// on a remote machine).
+	runner: 'local',
+
+	//
+	// ==================
+	// Specify Test Files
+	// ==================
+	// Define which test specs should run. The pattern is relative to the directory
+	// from which `wdio` was called. Notice that, if you are calling `wdio` from an
+	// NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+	// directory is where your package.json resides, so `wdio` will be called from there.
+	//
+	specs: [
+		'./test/specs/**/*.js'
+	],
+	// Patterns to exclude.
+	exclude: [
+		// 'path/to/excluded/files'
+	],
+	//
+	// ============
+	// Capabilities
+	// ============
+	// Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+	// time. Depending on the number of capabilities, WebdriverIO launches several test
+	// sessions. Within your capabilities you can overwrite the spec and exclude options in
+	// order to group specific specs to a specific capability.
+	//
+	// First, you can define how many instances should be started at the same time. Let's
+	// say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+	// set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+	// files and you set maxInstances to 10, all spec files will get tested at the same time
+	// and 30 processes will get spawned. The property handles how many capabilities
+	// from the same test should run tests.
+	//
+	maxInstances: 10,
+	//
+	// If you have trouble getting all important capabilities together, check out the
+	// Sauce Labs platform configurator - a great tool to configure your capabilities:
+	// https://docs.saucelabs.com/reference/platforms-configurator
+	//
+	capabilities: [{
+		// maxInstances can get overwritten per capability. So if you have an in-house Selenium
+		// grid with only 5 firefox instances available you can make sure that not more than
+		// 5 instances get started at a time.
+		maxInstances: process.env.TRAVIS ? 1 : 5,
+		//
+		browserName: 'chrome',
+		'goog:chromeOptions': {
+			// to run chrome headless the following flags are required
+			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
+			args: ['--headless', '--disable-gpu'],
+			// args: ['--disable-gpu'],
+		}
+	}],
+	//
+	// port to find chromedriver
+	port: 9515, // default
+	// ===================
+	// Test Configurations
+	// ===================
+	// Define all options that are relevant for the WebdriverIO instance here
+	//
+	// Level of logging verbosity: trace | debug | info | warn | error
+	logLevel: 'error',
+	//
+	// Warns when a deprecated command is used
+	deprecationWarnings: true,
+	//
+	// If you only want to run your tests until a specific amount of tests have failed use
+	// bail (default is 0 - don't bail, run all tests).
+	bail: 0,
+	//
+	// Set a base URL in order to shorten url command calls. If your `url` parameter starts
+	// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+	// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+	// gets prepended directly.
+	baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
+	path: '',
+	//
+	// Default timeout for all waitFor* commands.
+	waitforTimeout: 10000,
+	//
+	// Default timeout in milliseconds for request
+	// if Selenium Grid doesn't send response
+	connectionRetryTimeout: 90000,
+	//
+	// Default request retries count
+	connectionRetryCount: 3,
+	//
+	// Test runner services
+	// Services take over a specific job you don't want to take care of. They enhance
+	// your test setup with almost no effort. Unlike plugins, they don't add new
+	// commands. Instead, they hook themselves up into the test process.
+	services: ['chromedriver'],
+	// options
+	chromeDriverArgs: ['--port=9515'], // default
+	// Framework you want to run your specs with.
+	// The following are supported: Mocha, Jasmine, and Cucumber
+	// see also: https://webdriver.io/docs/frameworks.html
+	//
+	// Make sure you have the wdio adapter package for the specific framework installed
+	// before running any tests.
+	framework: 'mocha',
+	//
+	// Test reporter for stdout.
+	// The only one supported by default is 'dot'
+	// see also: https://webdriver.io/docs/dot-reporter.html
+	reporters: ['dot', 'spec'],
+
+	//
+	// Options to be passed to Mocha.
+	// See the full list at http://mochajs.org/
+	mochaOpts: {
+		ui: 'bdd',
+		timeout: 60000
+	},
+	//
+	// =====
+	// Hooks
+	// =====
+	// WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+	// it and to build services around it. You can either apply a single function or an array of
+	// methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+	// resolved to continue.
+	/**
+	 * Gets executed once before all workers get launched.
+	 * @param {Object} config wdio configuration object
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 */
+	// onPrepare: function (config, capabilities) {
+	// },
+	/**
+	 * Gets executed just before initialising the webdriver session and test framework. It allows you
+	 * to manipulate configurations depending on the capability or spec.
+	 * @param {Object} config wdio configuration object
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 * @param {Array.<String>} specs List of spec file paths that are to be run
+	 */
+	// beforeSession: function (config, capabilities, specs) {
+	// },
+	/**
+	 * Gets executed before test execution begins. At this point you can access to all global
+	 * variables like `browser`. It is the perfect place to define custom commands.
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 * @param {Array.<String>} specs List of spec file paths that are to be run
+	 */
+	before: function (capabilities, specs) {
+		browser.addCommand("isFocusedDeep", function () {
+			return browser.execute(function (elem) {
+				let activeElement = document.activeElement;
+
+				while (activeElement.shadowRoot) {
+					if (activeElement.shadowRoot.activeElement) {
+						activeElement = activeElement.shadowRoot.activeElement;
+					} else {
+						break;
+					}
+				}
+				return elem === activeElement;
+			}, 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;
+			}, this, property, value);
+		}, true);
+
+		browser.addCommand("setAttribute", function(attribute, value) {
+			return browser.execute((elem, attribute, value) => {
+				return elem.setAttribute(attribute, value);
+			}, this, attribute, value);
+		}, true);
+
+		browser.addCommand("removeAttribute", function(attribute) {
+			return browser.execute((elem, attribute) => {
+				return elem.removeAttribute(attribute);
+			}, this, attribute);
+		}, true);
+
+		browser.addCommand("hasClass", function(className) {
+			return browser.execute((elem, className) => {
+				return elem.classList.contains(className);
+			}, this, className);
+		}, true);
+
+		browser.addCommand("getStaticAreaItemClassName", function(selector) {
+			return browser.execute(async (selector) => {
+				const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
+				return staticAreaItem.host.classList[0];
+			}, selector);
+		}, false);
+	},
+	/**
+	 * Runs before a WebdriverIO command gets executed.
+	 * @param {String} commandName hook command name
+	 * @param {Array} args arguments that command would receive
+	 */
+	beforeCommand: function (commandName, args) {
+		const waitFor = [
+			"$",
+			"$$",
+			"getAttribute",
+			"getCSSProperty",
+			"getHTML",
+			"getProperty",
+			"getSize",
+			"getStaticAreaItemClassName", // custom
+			"getText",
+			"getValue",
+			"hasClass", // custom
+			"isDisplayed",
+			"isDisplayedInViewport",
+			"isEnabled",
+			"isExisting",
+			"isFocused",
+			"isFocusedDeep", // custom
+			"isFocusedDeepElement", // custom
+			"shadow$",
+			"shadow$$",
+		];
+		if (waitFor.includes(commandName)) {
+			browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+			});
+		}
+	},
+
+	/**
+	 * Hook that gets executed before the suite starts
+	 * @param {Object} suite suite details
+	 */
+	// beforeSuite: function (suite) {
+	// },
+	/**
+	 * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+	 * @param {Object} test test details
+	 */
+	// beforeTest: function (test) {
+	// },
+	/**
+	 * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+	 * beforeEach in Mocha)
+	 */
+	// beforeHook: function () {
+	// },
+	/**
+	 * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+	 * afterEach in Mocha)
+	 */
+	// afterHook: function () {
+	// },
+	/**
+	 * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+	 * @param {Object} test test details
+	 */
+	// afterTest: function (test) {
+	// },
+	/**
+	 * Hook that gets executed after the suite has ended
+	 * @param {Object} suite suite details
+	 */
+	// afterSuite: function (suite) {
+	// },
+
+	/**
+	 * Runs after a WebdriverIO command gets executed
+	 * @param {String} commandName hook command name
+	 * @param {Array} args arguments that command would receive
+	 * @param {Number} result 0 - command success, 1 - command error
+	 * @param {Object} error error object if any
+	 */
+	afterCommand: function (commandName, args, result, error) {
+
+		// url -> set configuration first
+		if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
+			browser.execute(function() {
+				window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
+			});
+		}
+
+		const waitFor = [
+			"addValue",
+			"clearValue",
+			"click",
+			"doubleClick",
+			"dragAndDrop",
+			"keys",
+			"pause",
+			"removeAttribute", // custom
+			"setAttribute", // custom
+			"setProperty", // custom
+			"setValue",
+			"setWindowSize",
+			"touchAction",
+			"url"
+		];
+		if (waitFor.includes(commandName)) {
+			browser.executeAsync(function (done) {
+				window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+			});
+		}
+	},
+	/**
+	 * Gets executed after all tests are done. You still have access to all global variables from
+	 * the test.
+	 * @param {Number} result 0 - test pass, 1 - test fail
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 * @param {Array.<String>} specs List of spec file paths that ran
+	 */
+	// after: function (result, capabilities, specs) {
+	// },
+	/**
+	 * Gets executed right after terminating the webdriver session.
+	 * @param {Object} config wdio configuration object
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 * @param {Array.<String>} specs List of spec file paths that ran
+	 */
+	// afterSession: function (config, capabilities, specs) {
+	// },
+	/**
+	 * Gets executed after all workers got shut down and the process is about to exit.
+	 * @param {Object} exitCode 0 - success, 1 - fail
+	 * @param {Object} config wdio configuration object
+	 * @param {Array.<Object>} capabilities list of capabilities details
+	 * @param {<Object>} results object containing test results
+	 */
+	// onComplete: function(exitCode, config, capabilities, results) {
+	// },
+	/**
+	 * Gets executed when a refresh happens.
+	 * @param {String} oldSessionId session ID of the old session
+	 * @param {String} newSessionId session ID of the new session
+	 */
+	//onReload: function(oldSessionId, newSessionId) {
+	//}
+}

package/icons-collection/nps.js

@@ -3,19 +3,53 @@ const resolve = require("resolve");
 
 const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
 const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
-const UP_TO_DATE = `node ${hashIsUpToDate} dist/ hash.txt && echo "Up to date."`;
+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,9 +61,9 @@ 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`,
+		hash: `node "${generateHash}" dist/ hash.txt`,
 	};
 
 	return scripts;

package/lib/copy-list/index.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+
+const fileList = process.argv[2];
+const dest = process.argv[3];
+const src = "../../node_modules/@openui5/sap.ui.core/src/";
+
+const filesToCopy = fs.readFileSync(fileList).toString();
+// console.log(filesToCopy);
+
+// Support full-line comments starting with # in the used-modules.txt file
+const shouldCopy = file => file.length && !file.startsWith("#");
+
+const trimFile = file => file.trim();
+
+filesToCopy.split("\n").map(trimFile).filter(shouldCopy).forEach(async moduleName => {
+	const srcPath = path.join(src, moduleName);
+	const destPath = path.join(dest, moduleName);
+
+	await mkdirp(path.dirname(destPath));
+    fs.copyFile(srcPath, destPath, (err) => {
+    	if (err) {
+    		throw err;
+		}
+		console.log(`${destPath} created.`);
+	});
+});

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 { isTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import pathDataV4 from "./v5/${name}.js";
+import pathDataV5 from "./v4/${name}.js";
+const pathData = isTheme("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

@@ -0,0 +1,150 @@
+const fs = require("fs");
+const path = require("path");
+const mkdirp = require("mkdirp");
+
+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];
+const illustrationSet = process.argv[5];
+const destPath = process.argv[6];
+const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
+// collect each illustration name because each one should have Sample.js file
+const fileNames = new Set();
+
+const svgImportTemplate = svgContent => { return `export default \`${svgContent}\`;`};
+const svgToJs = fileName => {
+	const svg = fs.readFileSync(path.join(srcPath, fileName), { encoding: "utf-8" });
+	const fileContent = svgImportTemplate(svg);
+	fileName = fileName.replace(/\.svg$/, ".js");
+
+	fs.writeFileSync(path.join(destPath, fileName), fileContent);
+};
+const illustrationImportTemplate = illustrationName => {
+	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_${illustrationNameUpperCase},
+	IM_SUBTITLE_${illustrationNameUpperCase},
+} from "../generated/i18n/i18n-defaults.js";
+
+const name = "${illustrationName}";
+const set = "${illustrationSet}";
+const title = IM_TITLE_${illustrationNameUpperCase};
+const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};
+
+registerIllustration(name, {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+	title,
+	subtitle,
+	set,
+});
+
+export {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+};` :
+`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";
+
+const name = "${illustrationName}";
+const set = "${illustrationSet}";
+
+registerIllustration(name, {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+	set,
+});
+
+export {
+	dialogSvg,
+	sceneSvg,
+	spotSvg,
+};`
+};
+
+mkdirp.sync(destPath);
+
+const illustrationFileNames = fs.readdirSync(path.normalize(srcPath));
+
+// convert SVG to JS imports
+illustrationFileNames.forEach(illustration => {
+	if (fileNamePattern.test(illustration)) {
+		let [fileName, illustrationName] = illustration.match(fileNamePattern);
+
+		svgToJs(fileName);
+		fileNames.add(illustrationName);
+	}
+});
+
+for (let illustrationName of fileNames) {
+	fs.writeFileSync(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName));
+}

package/lib/create-new-component/index.js

@@ -139,8 +139,16 @@ console.log(`Successfully generated ${componentName}.js`);
 console.log(`Successfully generated ${componentName}.css`);
 console.log(`Successfully generated ${componentName}.hbs`);
 
+const bundleLogger = fs.createWriteStream("./bundle.common.js", {
+	flags: "a" // appending
+});
+
+bundleLogger.write(`
+// TODO: Move this line in order to keep the file sorted alphabetically
+import ${componentName} from "./dist/${componentName}.js";`);
+
 // Change the color of the output
-console.warn('\x1b[33m%s\x1b[0m', `
-Please import the generated component in bundle.esm.js:
-import ${componentName} from "./dist/${componentName}.js";
-`);
+	console.warn('\x1b[33m%s\x1b[0m', `
+Component is imported in bundle.common.js.
+Do NOT forget to sort the file in alphabeticall order.
+`);