@ui5/webcomponents-tools 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/lib/css-processors/css-processor-themes.mjs

@@ -0,0 +1,79 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+import * as path from "path";
+import { writeFile, mkdir } from "fs/promises";
+import postcss from "postcss";
+import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/index.js"
+import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
+import scopeVariables from "./scope-variables.mjs";
+
+const tsMode = process.env.UI5_TS === "true";
+const extension = tsMode ? ".css.ts" : ".css.js";
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+
+let inputFiles = await globby("src/**/parameters-bundle.css");
+const restArgs = process.argv.slice(2);
+
+const removeDuplicateSelectors = async (text) => {
+    const result = await postcss(combineDuplicatedSelectors).process(text);
+    return result.css;
+}
+
+let scopingPlugin = {
+    name: 'scoping',
+    setup(build) {
+        build.initialOptions.write = false;
+
+        build.onEnd(result => {
+            result.outputFiles.forEach(async f => {
+                // remove duplicate selectors
+                let newText = await removeDuplicateSelectors(f.text);
+
+                // strip unnecessary theming-base-content
+                newText = stripThemingBaseContent(newText);
+
+                // scoping
+                newText = scopeVariables(newText, packageJSON, f.path);
+                await mkdir(path.dirname(f.path), {recursive: true});
+                writeFile(f.path, newText);
+
+                // JSON
+                const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
+                await mkdir(path.dirname(jsonPath), {recursive: true});
+                const data = {
+                    packageName: packageJSON.name,
+                    fileName: jsonPath.substr(jsonPath.lastIndexOf("themes")),
+                    content: newText,
+                };
+                writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
+
+                // JS/TS
+                const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
+                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
+                writeFileIfChanged(jsPath, jsContent);
+            });
+        })
+    },
+}
+
+const config = {
+    entryPoints: inputFiles,
+    bundle: true,
+    minify: true,
+    outdir: 'dist/css',
+    outbase: 'src',
+    plugins: [
+        scopingPlugin,
+    ],
+    external: ["*.ttf", "*.woff", "*.woff2"],
+};
+
+if (restArgs.includes("-w")) {
+    let ctx = await esbuild.context(config);
+    await ctx.watch()
+    console.log('watching...')
+} else {
+    const result = await esbuild.build(config);
+}

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/{postcss-css-to-esm/index.js → css-processors/shared.mjs}

@@ -1,7 +1,38 @@
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const assets = require("../../assets-meta.js");
+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;
 
@@ -42,49 +73,4 @@ const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
 	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.*{.*}/, "");
-	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
-	css = css.replace(/--sapFontUrl.*\);?/, "");
-	return JSON.stringify(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(`/${toReplace}/`, "/src/generated/").replace(`\\${toReplace}\\`, "\\src\\generated\\");
-			mkdirp.sync(path.dirname(targetFile));
-
-			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 = "";
-			try {
-				oldContent = fs.readFileSync(filePath).toString();
-			} catch (e) {
-				// file not found
-			}
-
-			const content = getFileContent(tsMode, targetFile, packageName, css, includeDefaultTheme);
-			if (content !== oldContent) {
-				fs.writeFileSync(filePath, content);
-			}
-		}
-	};
-};
-module.exports.postcss = true;
+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/generate-custom-elements-manifest/index.js

@@ -5,61 +5,40 @@ const path = require("path");
 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 moduleDeclarations = new Map();
 
 const generateJavaScriptExport = entity => {
 	return {
-		declaration: generateRefenrece(entity.name),
-		deprecated: !!entity.deprecated,
+		declaration: {
+			name: entity.basename,
+			module: `dist/${entity.resource}`,
+		},
 		kind: "js",
 		name: "default",
 	};
 };
 
 const generateCustomElementExport = entity => {
+	if (!entity.tagname) return;
+
 	return {
 		declaration: {
 			name: entity.basename,
-			module: `${entity.module}.js`,
+			module: `dist/${entity.resource}`,
 		},
-		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),
-		],
+		name: entity.basename,
 	};
 };
 
 const generateSingleClassField = classField => {
 	let generatedClassField = {
-		deprecated: !!classField.deprecated,
 		kind: "field",
 		name: classField.name,
-		privacy: classField.visibility,
-		static: !!classField.static,
 		type: generateType(classField.type),
+		privacy: classField.visibility,
+		deprecated: !!classField.deprecated || undefined,
+		static: !!classField.static || undefined,
 	};
 
 	if (classField.defaultValue) {
@@ -75,7 +54,7 @@ const generateSingleClassField = classField => {
 
 const generateSingleParameter = parameter => {
 	let generatedParameter = {
-		deprecated: !!parameter.deprecated,
+		deprecated: !!parameter.deprecated || undefined,
 		name: parameter.name,
 		type: generateType(parameter.type),
 	};
@@ -86,6 +65,7 @@ const generateSingleParameter = parameter => {
 
 	if (parameter.optional) {
 		generatedParameter.optional = parameter.optional;
+		generatedParameter.default = parameter.defaultValue;
 	}
 
 	return generatedParameter;
@@ -101,7 +81,7 @@ const generateParameters = (parameters) => {
 
 const generateSingleClassMethod = classMethod => {
 	let generatedClassMethod = {
-		deprecated: !!classMethod.deprecated,
+		deprecated: !!classMethod.deprecated || undefined,
 		kind: "method",
 		name: classMethod.name,
 		privacy: classMethod.visibility,
@@ -122,7 +102,7 @@ const generateSingleClassMethod = classMethod => {
 		};
 
 		if (classMethod.returnValue.description) {
-			generatedClassMethod.return.description = classMethod.returnValue.type;
+			generatedClassMethod.return.description = classMethod.returnValue.description;
 		}
 	}
 
@@ -150,47 +130,16 @@ const generateMembers = (classFields, 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),
+		text: 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,
+		deprecated: !!event.deprecated || undefined,
 		name: event.name,
-		type: event.native === "true" ? "NativeEvent" : "CustomEvent",
+		type: generateType(event.native === "true" ? "NativeEvent" : "CustomEvent")
 	};
 
 	if (event.description) {
@@ -212,7 +161,7 @@ const generateEvents = events => {
 
 const generateSingleSlot = slot => {
 	return {
-		deprecated: !!slot.deprecated,
+		deprecated: !!slot.deprecated || undefined,
 		description: slot.description,
 		name: slot.name,
 	};
@@ -230,9 +179,9 @@ const generateSlots = slots => {
 
 const generateCustomElementDeclaration = entity => {
 	let generatedCustomElementDeclaration = {
-		deprecated: !!entity.deprecated,
+		deprecated: !!entity.deprecated || undefined,
 		customElement: true,
-		kind: entity.basename,
+		kind: entity.kind,
 		name: entity.basename,
 		tagName: entity.tagname,
 	};
@@ -241,9 +190,6 @@ const generateCustomElementDeclaration = entity => {
 	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);
@@ -253,10 +199,6 @@ const generateCustomElementDeclaration = entity => {
 		generatedCustomElementDeclaration.events = generateEvents(events);
 	}
 
-	if (attributes.length) {
-		generatedCustomElementDeclaration.attributes = generateAttributes(attributes);
-	}
-
 	if (entity.description) {
 		generatedCustomElementDeclaration.description = entity.description;
 	}
@@ -273,31 +215,8 @@ const generateCustomElementDeclaration = entity => {
 };
 
 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,
+		name: entityName,
 	};
 };
 
@@ -313,12 +232,37 @@ const generate = async () => {
 		modules: [],
 	};
 
-	file.symbols.forEach(entity => {
-		if (entity.tagname) {
-			customElementsManifest.modules.push(generateJavaScriptModule(entity));
+	filterPublicApi(file.symbols).forEach(entity => {
+		let declaration = moduleDeclarations.get(entity.resource);
+
+		if (!declaration) {
+			moduleDeclarations.set(entity.resource, {
+				declarations: [],
+				exports: [],
+			});
+			declaration = moduleDeclarations.get(entity.resource);
+		}
+
+		if (entity.kind === "class" && entity.tagname) {
+			declaration.declarations.push(generateCustomElementDeclaration(entity));
+			declaration.exports.push(generateJavaScriptExport(entity));
+			declaration.exports.push(generateCustomElementExport(entity));
+		} else if (entity.kind === "class" && entity.static) {
+			declaration.exports.push(generateJavaScriptExport(entity));
 		}
 	});
 
+	[...moduleDeclarations.keys()].forEach(key => {
+		let declaration = moduleDeclarations.get(key);
+
+		customElementsManifest.modules.push({
+			kind: "javascript-module",
+			path: `dist/${key}`,
+			declarations: declaration.declarations,
+			exports: declaration.exports
+		})
+	})
+
 	await fs.writeFile(path.join(outputDir, "custom-elements.json"), JSON.stringify(customElementsManifest));
 };