@ui5/webcomponents-tools 0.0.0-e463d2345 → 0.0.0-e55c2cec6

package/lib/create-icons/index.js

@@ -1,50 +1,101 @@
-const fs = require("fs");
-const path = require("path");
-const mkdirp = require("mkdirp");
-
-const srcDir = `src/icon-collections/`;
-const destDir = `dist/icons/`;
-
-mkdirp(destDir);
-
-const template = (name, pathData) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
-
-const name = "${name}";
-const pathData = "${pathData}";
-
-registerIcon(name, { pathData });`;
-
-const accTemplate = (name, pathData, accData) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
-import { ${accData.key} } from "../generated/i18n/i18n-defaults.js";
-
-const name = "${name}";
-const pathData = "${pathData}";
-const accData = ${accData.key};
-
-registerIcon(name, { pathData, accData });`;
-
-
-const createIcons = (file) => {
-	const json = JSON.parse(fs.readFileSync(file));
-	for (let name in json.data) {
-		let content;
-		const pathData = json.data[name];
-		const accData = json.accData[name];
-
-		if (accData) {
-			content = accTemplate(name, pathData, accData);
-		} else {
-			content = template(name, pathData);
-		}
-
-		fs.writeFileSync(path.join(destDir, `${name}.js`), content);
-	}
-
-};
-
-fs.readdirSync(srcDir).forEach(collectionFile => {
-	createIcons(path.join(srcDir, collectionFile));
-});
-
-
-
+const fs = require("fs").promises;
+const path = require("path");
+
+const collectionName = process.argv[2] || "SAP-icons";
+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/");
+
+const iconTemplate = (name, pathData, ltr, collection, packageName) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+
+const name = "${name}";
+const pathData = "${pathData}";
+const ltr = ${ltr};
+const accData = null;
+const collection = "${collection}";
+const packageName = "${packageName}";
+
+registerIcon(name, { pathData, ltr, collection, packageName });
+
+export default "${collection}/${name}";
+export { pathData, ltr, accData };`;
+
+
+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}";
+const ltr = ${ltr};
+const accData = ${accData.key};
+const collection = "${collection}";
+const packageName = "${packageName}";
+
+registerIcon(name, { pathData, ltr, accData, collection, packageName });
+
+export default "${collection}/${name}";
+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 pathData = isThemeFamily("sap_horizon") ? pathDataV5 : pathDataV4;
+
+export default "${name}";
+export { pathData, ltr, accData };`;
+
+
+const typeDefinitionTemplate = (name, accData, collection) => `declare const pathData: string;
+declare const ltr: boolean;
+declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
+declare const _default: "${collection}/${name}";
+
+export default _default;
+export { pathData, ltr, accData };`
+
+const collectionTypeDefinitionTemplate = (name, accData) => `declare const pathData: string;
+declare const ltr: boolean;
+declare const accData: ${accData ? '{ key: string; defaultText: string; }' : null}
+declare const _default: "${name}";
+
+export default _default;
+export { pathData, ltr, accData };`
+
+
+const svgTemplate = (pathData) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<path d="${pathData}"/>
+</svg>`;
+
+const createIcons = async (file) => {
+	await fs.mkdir(destDir, { recursive: true });
+
+	const json = JSON.parse(await fs.readFile(file));
+
+	const promises = [];
+	for (let name in json.data) {
+		const iconData = json.data[name];
+		const pathData = iconData.path;
+		const ltr = !!iconData.ltr;
+		const acc = iconData.acc;
+
+		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.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)));
+
+		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)));
+		}
+	}
+
+	return Promise.all(promises);
+};
+
+createIcons(srcFile).then(() => {
+	console.log("Icons created.");
+});

package/lib/create-illustrations/index.js

@@ -0,0 +1,161 @@
+const fs = require("fs").promises;
+const path = require("path");
+
+if (process.argv.length < 7) {
+	throw new Error("Not enough arguments");
+}
+
+const generate = async () => {
+
+	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 = async fileName => {
+		const svg = await fs.readFile(path.join(srcPath, fileName), {encoding: "utf-8"});
+		const fileContent = svgImportTemplate(svg);
+		fileName = fileName.replace(/\.svg$/, ".js");
+
+		return fs.writeFile(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,
+};`
+	};
+
+	await fs.mkdir(destPath, { recursive: true });
+
+	const illustrationFileNames = await fs.readdir(path.normalize(srcPath));
+
+	// convert SVG to JS imports
+	const promises = [];
+	illustrationFileNames.forEach(illustration => {
+		if (fileNamePattern.test(illustration)) {
+			let [fileName, illustrationName] = illustration.match(fileNamePattern);
+
+			promises.push(svgToJs(fileName));
+			fileNames.add(illustrationName);
+		}
+	});
+
+	for (let illustrationName of fileNames) {
+		promises.push(fs.writeFile(path.join(destPath, `${illustrationName}.js`), illustrationImportTemplate(illustrationName)));
+	}
+
+	return Promise.all(promises);
+};
+
+generate().then(() => {
+	console.log("Illustrations generated.");
+});

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

@@ -13,13 +13,13 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  */
 const metadata = {
 	tag: "${tagName}",
-	properties: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	properties: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
-	slots: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	slots: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
-	events: /** @lends sap.ui.webcomponents.${library}.${componentName}.prototype */ {
+	events: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
 		//
 	},
 };
@@ -39,8 +39,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.${library}.${componentName}
- * @extends UI5Element
+ * @alias sap.ui.webc.${library}.${componentName}
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ${tagName}
  * @public
  */
@@ -61,8 +61,12 @@ class ${componentName} extends UI5Element {
 		return ${componentName}Template;
 	}
 
-	static async define(...params) {
-		super.define(...params);
+	static get dependencies() {
+		return [];
+	}
+
+	static async onDefine() {
+
 	}
 }
 
@@ -135,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.
+`);

package/lib/dev-server/dev-server.js

@@ -0,0 +1,66 @@
+const fs = require("fs/promises");
+const { createServer } = require('vite');
+const yargs = require('yargs/yargs')
+const { hideBin } = require('yargs/helpers')
+
+const argv = yargs(hideBin(process.argv))
+	.alias("c", "config")
+	.argv;
+
+const startVite = async (port) => {
+	const server = await createServer({
+		configFile: argv.config,
+		server: {
+			port: port,
+			strictPort: true,
+			open: true,
+			host: true,
+		},
+		logLevel: 'info',
+		clearScreen: false,
+	})
+	await server.listen()
+	server.printUrls()
+	return server;
+};
+
+const rmPortFile = async () => {
+	// exit handler must be sync
+	try {
+		await fs.rm(".dev-server-port");
+	} catch (e) {}
+	process.exit();
+}
+
+["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException", "SIGTERM"].forEach((eventType) => {
+	process.on(eventType, rmPortFile);
+});
+
+(async () => {
+	let retries = 10;
+	let port = 8080;
+	while (retries--) {
+		console.log(`taking port ${port}`);
+		await fs.writeFile(".dev-server-port", `${port}`);
+		try {
+			// execSync(command, {stdio: 'pipe'});
+			const server = await startVite(port);
+			if (server) {
+				// server started, don't try other ports
+				break;
+			}
+		} catch (e) {
+			// uncomment for debug
+			// console.log(e.toString());
+			if (e.toString().includes("already in use")) {
+				console.log(`Port ${port} already in use`)
+				port++;
+				continue;
+			}
+			// other error or CTRL-C
+			process.exit();
+		}
+		// no error normal exit
+		// process.exit();
+	}
+})();

package/lib/dev-server/virtual-index-html-plugin.js

@@ -0,0 +1,53 @@
+let path = require("path");
+
+const virtualIndexPlugin = async () => {
+	const { globby } = await import("globby");
+	const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
+
+	const pagesPerFolder = {};
+	files.forEach(file => {
+		let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
+		folder.push(path.basename(file));
+	});
+
+	const rollupInput = {};
+
+	files.forEach(file => {
+		rollupInput[file] = path.resolve(process.cwd(), file);
+	})
+
+	return {
+		name: 'virtual-index-html',
+		config() {
+			return {
+				build: {
+					rollupOptions: {
+						input: rollupInput
+					}
+				}
+			}
+		},
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				if (req.url === "/") {
+					const folders = Object.keys(pagesPerFolder);
+
+					res.statusCode = 200;
+					res.setHeader("Content-Type", "text/html; charset=utf-8");
+					res.end(`${folders.map(folder => {
+						const pages = pagesPerFolder[folder];
+						return `<h1>${folder}</h1>
+							${pages.map(page => {
+								return `<li><a href='${folder}/${page}'>${page}</a></li>`
+							}).join("")}
+						`
+					}).join("")}`);
+				} else {
+					next();
+				}
+			})
+		},
+	}
+};
+
+module.exports = virtualIndexPlugin;

package/lib/esm-abs-to-rel/index.js

@@ -0,0 +1,58 @@
+const esprima = require("esprima");
+const escodegen = require("escodegen");
+
+const fs = require("fs").promises;
+const path = require("path");
+const basePath = process.argv[2];
+
+const convertImports = async (srcPath) => {
+	let changed = false;
+	// console.log("scanning imports of", srcPath);
+	let code = (await fs.readFile(srcPath)).toString();
+	const tree = esprima.parseModule(code);
+	const importer = srcPath.replace(basePath, "");
+	const importerDir = path.dirname(importer);
+	// console.log("-> ", importer);
+	tree.body.forEach(node => {
+		if (node.type === "ImportDeclaration") {
+			let importee = node.source.value;
+			if (importee.startsWith(".")) {
+				// add .js extension if missing
+				if (!importee.endsWith(".js")) {
+					node.source.value += ".js"
+					changed = true;
+				}
+				return;
+			}
+			let importeeDir = path.dirname(importee);
+			let importeeFile = path.basename(importee);
+			let relativePath = path.relative(importerDir, importeeDir);
+			if (relativePath.length === 0) {
+				relativePath = "."
+			}
+			if (!relativePath.startsWith(".")) {
+				relativePath = "./" + relativePath;
+			}
+
+			relativePath = relativePath.replace(/\\/g, "/"); // the browser expects unix paths
+			let relativeImport = `${relativePath}/${importeeFile}.js`;
+			// console.log(importee + " --> " + relativeImport);
+			node.source.value = relativeImport;
+			changed = true;
+		}
+	});
+
+	if (changed) {
+		return fs.writeFile(srcPath, escodegen.generate(tree));
+	}
+}
+
+const generate = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath + "**/*.js");
+	return Promise.all(fileNames.map(convertImports).filter(x => !!x));
+};
+
+generate().then(() => {
+	console.log("Success: Converted absolute imports to relative for files in:", basePath);
+});