@ui5/webcomponents-tools 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

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

@@ -0,0 +1,271 @@
+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 moduleDeclarations = new Map();
+
+const generateJavaScriptExport = entity => {
+	return {
+		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: `dist/${entity.resource}`,
+		},
+		kind: "custom-element-definition",
+		name: entity.basename,
+	};
+};
+
+const generateSingleClassField = classField => {
+	let generatedClassField = {
+		kind: "field",
+		name: classField.name,
+		type: generateType(classField.type),
+		privacy: classField.visibility,
+		deprecated: !!classField.deprecated || undefined,
+		static: !!classField.static || undefined,
+	};
+
+	if (classField.defaultValue) {
+		generatedClassField.default = classField.defaultValue;
+	}
+
+	if (classField.description) {
+		generatedClassField.description = classField.description;
+	}
+
+	return generatedClassField;
+};
+
+const generateSingleParameter = parameter => {
+	let generatedParameter = {
+		deprecated: !!parameter.deprecated || undefined,
+		name: parameter.name,
+		type: generateType(parameter.type),
+	};
+
+	if (parameter.description) {
+		generatedParameter.description = parameter.description;
+	}
+
+	if (parameter.optional) {
+		generatedParameter.optional = parameter.optional;
+		generatedParameter.default = parameter.defaultValue;
+	}
+
+	return generatedParameter;
+};
+
+const generateParameters = (parameters) => {
+	return parameters.reduce((newParametersArray, parameter) => {
+		newParametersArray.push(generateSingleParameter(parameter));
+
+		return newParametersArray;
+	}, []);
+};
+
+const generateSingleClassMethod = classMethod => {
+	let generatedClassMethod = {
+		deprecated: !!classMethod.deprecated || undefined,
+		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.description;
+		}
+	}
+
+	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 => {
+	return {
+		text: type,
+	};
+};
+
+const generateSingleEvent = event => {
+	let generatedEvent = {
+		deprecated: !!event.deprecated || undefined,
+		name: event.name,
+		type: generateType(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 || undefined,
+		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 || undefined,
+		customElement: true,
+		kind: entity.kind,
+		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);
+
+	if (slots.length) {
+		generatedCustomElementDeclaration.slots = generateSlots(slots);
+	}
+
+	if (events.length) {
+		generatedCustomElementDeclaration.events = generateEvents(events);
+	}
+
+	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) => {
+	return {
+		name: entityName,
+	};
+};
+
+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: [],
+	};
+
+	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));
+};
+
+generate().then(() => {
+	console.log("Custom elements manifest generated.");
+});

package/lib/generate-json-imports/i18n.js

@@ -9,6 +9,7 @@ const generate = async () => {
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const inputFolder = path.normalize(process.argv[2]);
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-static.${ext}`);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
 
 // All languages present in the file system
@@ -18,16 +19,46 @@ const generate = async () => {
 		return matches ? matches[1] : undefined;
 	}).filter(key => !!key);
 
-	let contentDynamic;
+	let contentStatic, contentDynamic;
 
 // No i18n - just import dependencies, if any
 	if (languages.length === 0) {
+		contentStatic = "";
 		contentDynamic = "";
 // There is i18n - generate the full file
 	} else {
 		// Keys for the array
+		const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
 		const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
+		// Actual imports for json assets
+		const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
+
+		// static imports
+		contentStatic = `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+${assetsImportsString}
+
+const bundleMap = {
+	${languagesKeysString}
+};
+
+const fetchMessageBundle = async (localeId) => {
+	if (typeof bundleMap[localeId] === "object") {
+		// inlined from build
+		throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
+	}
+	return (await fetch(bundleMap[localeId])).json()
+}
+
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
+});
+`;
+
 		// Actual imports for json assets
 		const dynamicImportsString = languages.map(key => `		case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
 
@@ -45,7 +76,7 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
 	const importAndCheck = async (localeId) => {
 		const data = await importMessageBundle(localeId);
 		if (typeof data === "string" && data.endsWith(".json")) {
-			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
+			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
 		}
 		return data;
 	}
@@ -60,8 +91,9 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
 
 	}
 
-	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
 	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic),
 	]);
 }

package/lib/generate-json-imports/themes.js

@@ -7,6 +7,7 @@ const ext = isTypeScript ? 'ts' : 'js';
 
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
+	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
 
 // All supported optional themes
@@ -21,9 +22,34 @@ const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
+	const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
+	const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
 	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
 	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
 
+
+// static imports file content
+	const contentStatic = `// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+${importLines}
+
+const themeUrlsByName = ${themeUrlsByName};
+const isInlined = obj => typeof (obj) === "object";
+
+const loadThemeProperties = async (themeName) => {
+	if (typeof themeUrlsByName[themeName] === "object") {
+		// inlined from build
+		throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(themeUrlsByName[themeName])).json();
+};
+
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
+`;
+
+
 // dynamic imports file content
 	const contentDynamic = `// @ts-nocheck
 import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
@@ -38,7 +64,7 @@ ${dynamicImportLines}
 const loadAndCheck = async (themeName) => {
 	const data = await loadThemeProperties(themeName);
 	if (typeof data === "string" && data.endsWith(".json")) {
-		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
+		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
 	}
 	return data;
 };
@@ -47,8 +73,9 @@ ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
 
-	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
 	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic)
 	]);
 };

package/lib/i18n/defaults.js

@@ -31,7 +31,7 @@ const generate = async () => {
 	// (2) as the messagebundle.properties file is always written in English,
 	// it makes sense to consider the messagebundle.properties content only when the default language is "en".
 	if (defaultLanguage === "en") {
-		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
+		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);  
 	}
 
 	/*

package/lib/jsdoc/config.json

@@ -0,0 +1,29 @@
+{
+	"source": {
+		"include": "src",
+		"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
+	},
+	"opts" : {
+		"recurse": true,
+		"template" : "template",
+		"destination": ""
+	},
+	"plugins": [
+		"./plugin.js"
+	],
+	"templates" : {
+		"ui5" : {
+			"variants": [
+				"apijson"
+			],
+			"version": "1.62",
+			"apiJsonFolder": "",
+			"apiJsonFile": "dist/api.json",
+			"includeSettingsInConstructor": false
+		}
+	},
+	"tags": {
+		"allowUnknownTags": true,
+		"dictionaries": ["jsdoc"]
+	}
+}

package/lib/jsdoc/configTypescript.json

@@ -0,0 +1,29 @@
+{
+	"source": {
+		"include": "jsdoc-dist",
+		"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
+	},
+	"opts" : {
+		"recurse": true,
+		"template" : "template",
+		"destination": ""
+	},
+	"plugins": [
+		"./plugin.js"
+	],
+	"templates" : {
+		"ui5" : {
+			"variants": [
+				"apijson"
+			],
+			"version": "1.62",
+			"apiJsonFolder": "",
+			"apiJsonFile": "dist/api.json",
+			"includeSettingsInConstructor": false
+		}
+	},
+	"tags": {
+		"allowUnknownTags": true,
+		"dictionaries": ["jsdoc"]
+	}
+}