@ui5/webcomponents-tools 0.0.0-f734ea2da → 0.0.0-f79db712b

package/lib/css-processors/scope-variables.mjs

@@ -0,0 +1,46 @@
+import * as path from "path";
+
+/**
+ * Tries to detect an override for a package
+ * @param {*} filePath For example: /my_project/src/themes/overrides/@ui5/webcomponents/my_custom_theme/parameters-bundle.css
+ * @returns
+ */
+const getOverrideVersion = filePath => {
+    if (!filePath) {
+        return;
+    }
+
+	if (!filePath.includes(`overrides${path.sep}`)) {
+		return; // The "overrides/" directory is the marker
+	}
+	const override = filePath.split(`overrides${path.sep}`)[1]; // For example, this will be: @ui5/webcomponents/my_custom_theme/parameters-bundle.css
+	if (!override) {
+		return; // There must be other directories after overrides/, the path can't end with it
+	}
+	const parts = override.split(path.sep);
+	if (parts.length < 3) {
+		return; // There must be at least a directory for the theme that is being overridden (my_custom_theme) and the name of the CSS file after the name of the package that is overridden
+	}
+	const packageName = parts.slice(0, -2).join(path.sep); // After the last 2 parts are removed (my_custom_theme and parameters-bundle.css from the example), the rest is the package
+
+	let overrideVersion;
+	try {
+		overrideVersion = require(`${packageName}${path.sep}package.json`).version;
+	} catch (e) {
+		console.log(`Error requiring package ${packageName}: ${e.message}`);
+	}
+
+	return overrideVersion;
+}
+
+const scopeVariables = (cssText, packageJSON, inputFile) => {
+    const escapeVersion = version => "v" + version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-");
+    const versionStr = escapeVersion(getOverrideVersion(inputFile) || packageJSON.version);
+
+    const expr = /(--_?ui5)([^\,\:\)\s]+)/g;
+
+    return cssText.replaceAll(expr, `$1-${versionStr}$2`);
+}
+
+export default scopeVariables;
+

package/lib/css-processors/shared.mjs

@@ -0,0 +1,76 @@
+import { writeFile, readFile, mkdir } from "fs/promises";
+import * as path from "path";
+import assets from "../../assets-meta.js";
+
+const readOldContent = async (fileName) => {
+    // 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 = "";
+    try {
+        oldContent = (await readFile(fileName)).toString();
+    } catch (e) {
+        // file not found
+    }
+    return oldContent;
+}
+
+const writeFileIfChanged = async (fileName, content) => {
+    const oldContent = await readOldContent(fileName);
+    if (content !== oldContent) {
+        if (!oldContent) {
+            await mkdir(path.dirname(fileName), {recursive: true});
+        }
+        return writeFile(fileName, content);
+    }
+}
+
+// strips the unnecessary theming data coming from @sap-theming/theming-base-content and leaves only the css parameters
+const stripThemingBaseContent = css => {
+	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
+	css = css.replace(/\.background-image.*{.*}/, "");
+	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
+	css = css.replace(/--sapFontUrl.*\);?/, "");
+	return css;
+}
+
+
+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-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}", 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}}`
+}
+
+export { writeFileIfChanged, stripThemingBaseContent, getFileContent}

package/lib/dev-server/custom-hot-update-plugin.js

@@ -0,0 +1,39 @@
+const fs = require("fs");
+
+/**
+ * A change is observed on MacOS since 13.5, where the build generates a large amount
+ * of JSON file that spotlight search has to index, as they are considered new files.
+ *
+ * Starting the vitejs dev server reads all of these files and this triggers the indexing.
+ * The indexing has a side effect of changing some file metadata (can be checked with `mdls <path_to_file>`).
+ * This metadata change is changing the ctime of the file, but not the mtime. This can be checked with `stat -x <path_to_file>
+ *
+ * Essentially only metadata is changed, not content. This should not cause a page refresh,
+ * but chokidar reports this change and vite refreshes the page.
+ * The indexing is running with a 10 second interval, so for roughtly 20 minutes vite is refreshing the page every 10 seconds
+ *
+ * This plugin checks if the file causing the refresh is a generated json file (dist/*.json) and if ctime is changed after mtime
+ * In that case, returing an empty array tells vitejs that a custom update will be made by the plugin,
+ * which is in effect ignoring the page refresh.
+ */
+
+const customHotUpdate = async () => {
+	return {
+		name: 'custom-hot-update',
+		handleHotUpdate(ctx) {
+			// custom check for generated json files
+			if (ctx.file.endsWith(".json")) {
+				const stat = fs.statSync(ctx.file);
+
+				// metadata change only
+				if (stat.ctime > stat.mtime) {
+					// uncomment for debugging
+					// console.log("ignoring hot update for:", ctx.file);
+					return [];
+				}
+			}
+		}
+	}
+};
+
+module.exports = customHotUpdate;

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,52 @@
+const virtualIndexPlugin = async () => {
+	const path = await import("path");
+	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

@@ -1,15 +1,17 @@
 const esprima = require("esprima");
 const escodegen = require("escodegen");
 
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require("path");
-const glob = require("glob");
 const basePath = process.argv[2];
 
-const convertImports = (srcPath) => {
+const convertImports = async (srcPath) => {
 	let changed = false;
-	// console.log("scanning imports of", srcPath);
-	let code = fs.readFileSync(srcPath).toString();
+	let code = (await fs.readFile(srcPath)).toString();
+	if (code.includes("import(")) {
+		// esprima can't parse this, but it's from the project files
+		return;
+	}
 	const tree = esprima.parseModule(code);
 	const importer = srcPath.replace(basePath, "");
 	const importerDir = path.dirname(importer);
@@ -44,11 +46,16 @@ const convertImports = (srcPath) => {
 	});
 
 	if (changed) {
-		fs.writeFileSync(srcPath, escodegen.generate(tree));
+		return fs.writeFile(srcPath, escodegen.generate(tree));
 	}
 }
 
-const fileNames = glob.sync(basePath + "**/*.js");
-// console.log(fileNames);
-fileNames.forEach(convertImports);
-console.log("Success: Converted absolute imports to relative for files in:", basePath)
+const generate = async () => {
+	const { globby } = await import("globby");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
+	return Promise.all(fileNames.map(convertImports).filter(x => !!x));
+};
+
+generate().then(() => {
+	console.log("Success: Converted absolute imports to relative for files in:", basePath);
+});

package/lib/generate-custom-elements-manifest/index.js

@@ -0,0 +1,327 @@
+const fs = require("fs").promises;
+const path = require("path");
+// https://github.com/webcomponents/custom-elements-manifest/blob/main/schema.json
+
+const inputDir = process.argv[2];
+const outputDir = process.argv[3];
+
+const camelToKebabMap = new Map();
+const apiIndex = new Map();
+const forbiddenAttributeTypes = ["object", "array"];
+
+const camelToKebabCase = string => {
+	if (!camelToKebabMap.has(string)) {
+		const result = string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+		camelToKebabMap.set(string, result);
+	}
+	return camelToKebabMap.get(string);
+};
+
+const generateJavaScriptExport = entity => {
+	return {
+		declaration: generateRefenrece(entity.name),
+		deprecated: !!entity.deprecated,
+		kind: "js",
+		name: "default",
+	};
+};
+
+const generateCustomElementExport = entity => {
+	return {
+		declaration: {
+			name: entity.basename,
+			module: `${entity.module}.js`,
+		},
+		deprecated: !!entity.deprecated,
+		kind: "custom-element-definition",
+		name: entity.tagname,
+	};
+};
+
+const generateJavaScriptModule = entity => {
+	return {
+		kind: "javascript-module",
+		path: `${entity.basename}.js`,
+		declarations: [
+			generateCustomElementDeclaration(entity),
+		],
+		exports: [
+			generateJavaScriptExport(entity),
+			generateCustomElementExport(entity),
+		],
+	};
+};
+
+const generateSingleClassField = classField => {
+	let generatedClassField = {
+		deprecated: !!classField.deprecated,
+		kind: "field",
+		name: classField.name,
+		privacy: classField.visibility,
+		static: !!classField.static,
+		type: generateType(classField.type),
+	};
+
+	if (classField.defaultValue) {
+		generatedClassField.default = classField.defaultValue;
+	}
+
+	if (classField.description) {
+		generatedClassField.description = classField.description;
+	}
+
+	return generatedClassField;
+};
+
+const generateSingleParameter = parameter => {
+	let generatedParameter = {
+		deprecated: !!parameter.deprecated,
+		name: parameter.name,
+		type: generateType(parameter.type),
+	};
+
+	if (parameter.description) {
+		generatedParameter.description = parameter.description;
+	}
+
+	if (parameter.optional) {
+		generatedParameter.optional = parameter.optional;
+	}
+
+	return generatedParameter;
+};
+
+const generateParameters = (parameters) => {
+	return parameters.reduce((newParametersArray, parameter) => {
+		newParametersArray.push(generateSingleParameter(parameter));
+
+		return newParametersArray;
+	}, []);
+};
+
+const generateSingleClassMethod = classMethod => {
+	let generatedClassMethod = {
+		deprecated: !!classMethod.deprecated,
+		kind: "method",
+		name: classMethod.name,
+		privacy: classMethod.visibility,
+		static: classMethod.static,
+	};
+
+	if (classMethod.description) {
+		generatedClassMethod.description = classMethod.description;
+	}
+
+	if (classMethod.parameters && classMethod.parameters.length) {
+		generatedClassMethod.parameters = generateParameters(classMethod.parameters);
+	}
+
+	if (classMethod.returnValue) {
+		generatedClassMethod.return = {
+			type: generateType(classMethod.returnValue.type),
+		};
+
+		if (classMethod.returnValue.description) {
+			generatedClassMethod.return.description = classMethod.returnValue.type;
+		}
+	}
+
+	return generatedClassMethod;
+};
+
+const generateClassFields = classFields => {
+	return classFields.reduce((newClassFieldsArray, classField) => {
+		newClassFieldsArray.push(generateSingleClassField(classField));
+
+		return newClassFieldsArray;
+	}, []);
+};
+
+const generateClassMethods = classMethods => {
+	return classMethods.reduce((newClassMethodsArray, classMethod) => {
+		newClassMethodsArray.push(generateSingleClassMethod(classMethod));
+
+		return newClassMethodsArray;
+	}, []);
+};
+
+const generateMembers = (classFields, classMethods) => {
+	return [...generateClassFields(classFields), ...generateClassMethods(classMethods)];
+};
+
+const generateType = type => {
+	const dataType = apiIndex.get(type);
+
+	return {
+		text: dataType && dataType.name.includes(".types.") ?
+			filterPublicApi(dataType.properties)
+				.map(prop => `"${prop.name}"`)
+				.join(" | ") : type,
+	};
+};
+
+const generateSingleAttribute = attribute => {
+	let generatedAttribute = {
+		default: attribute.defaultValue,
+		deprecated: !!attribute.deprecated,
+		fieldName: attribute.name,
+		name: camelToKebabCase(attribute.name),
+		type: generateType(attribute.type),
+	};
+
+	if (attribute.description) {
+		generatedAttribute.description = attribute.description;
+	}
+
+	return generatedAttribute;
+};
+
+const generateAttributes = attributes => {
+	attributes = attributes.reduce((newAttributesArray, attribute) => {
+		newAttributesArray.push(generateSingleAttribute(attribute));
+
+		return newAttributesArray;
+	}, []);
+
+	return attributes;
+};
+
+const generateSingleEvent = event => {
+	let generatedEvent = {
+		deprecated: !!event.deprecated,
+		name: event.name,
+		type: event.native === "true" ? "NativeEvent" : "CustomEvent",
+	};
+
+	if (event.description) {
+		generatedEvent.description = event.description;
+	}
+
+	return generatedEvent;
+};
+
+const generateEvents = events => {
+	events = events.reduce((newEventsArray, event) => {
+		newEventsArray.push(generateSingleEvent(event));
+
+		return newEventsArray;
+	}, []);
+
+	return events;
+};
+
+const generateSingleSlot = slot => {
+	return {
+		deprecated: !!slot.deprecated,
+		description: slot.description,
+		name: slot.name,
+	};
+};
+
+const generateSlots = slots => {
+	slots = slots.reduce((newSlotsArray, event) => {
+		newSlotsArray.push(generateSingleSlot(event));
+
+		return newSlotsArray;
+	}, []);
+
+	return slots;
+};
+
+const generateCustomElementDeclaration = entity => {
+	let generatedCustomElementDeclaration = {
+		deprecated: !!entity.deprecated,
+		customElement: true,
+		kind: entity.basename,
+		name: entity.basename,
+		tagName: entity.tagname,
+	};
+
+	const slots = filterPublicApi(entity.slots);
+	const events = filterPublicApi(entity.events);
+	const classFields = filterPublicApi(entity.properties);
+	const classMethods = filterPublicApi(entity.methods);
+	const attributes = classFields.filter(property => {
+		return property.noattribute !== "true" && property.readonly !== "true" && !forbiddenAttributeTypes.includes(property.type.toLowerCase());
+	});
+
+	if (slots.length) {
+		generatedCustomElementDeclaration.slots = generateSlots(slots);
+	}
+
+	if (events.length) {
+		generatedCustomElementDeclaration.events = generateEvents(events);
+	}
+
+	if (attributes.length) {
+		generatedCustomElementDeclaration.attributes = generateAttributes(attributes);
+	}
+
+	if (entity.description) {
+		generatedCustomElementDeclaration.description = entity.description;
+	}
+
+	if (classFields.length || classMethods.length) {
+		generatedCustomElementDeclaration.members = generateMembers(classFields, classMethods);
+	}
+
+	if (entity.extends && entity.extends !== "HTMLElement") {
+		generatedCustomElementDeclaration.superclass = generateRefenrece(entity.extends);
+	}
+
+	return generatedCustomElementDeclaration;
+};
+
+const generateRefenrece = (entityName) => {
+	let packageName;
+	let basename;
+
+	if (!entityName) {
+		throw new Error("JSDoc error: entity not found in api.json.");
+	}
+
+	if (entityName.includes(".")) {
+		basename = entityName.split(".").pop();
+	} else {
+		basename = entityName
+	}
+
+	if (entityName.includes("sap.ui.webc.main")) {
+		packageName = "@ui5/webcomponents";
+	} else if (entityName.includes("sap.ui.webc.fiori")) {
+		packageName = "@ui5/webcomponents-fiori";
+	} else if (entityName.includes("sap.ui.webc.base")) {
+		packageName = "@ui5/webcomponents-base";
+	}
+
+	return {
+		module: `${basename}.js`,
+		name: `${basename}`,
+		package: packageName,
+	};
+};
+
+const filterPublicApi = array => {
+	return (array || []).filter(el => el.visibility === "public");
+};
+
+const generate = async () => {
+	const file = JSON.parse(await fs.readFile(path.join(inputDir, "api.json")));
+	let customElementsManifest = {
+		schemaVersion: "1.0.0",
+		readme: "",
+		modules: [],
+	};
+
+	file.symbols.forEach(entity => {
+		if (entity.tagname || entity.kind === "class") {
+			customElementsManifest.modules.push(generateJavaScriptModule(entity));
+		}
+	});
+
+	await fs.writeFile(path.join(outputDir, "custom-elements.json"), JSON.stringify(customElementsManifest));
+};
+
+generate().then(() => {
+	console.log("Custom elements manifest generated.");
+});