@ui5/webcomponents-tools 0.0.0-974b11d82 → 0.0.0-97db186fd

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -1,7 +1,35 @@
-const buildRenderer = (controlName, litTemplate) => {
-	return `/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	return `import type UI5Element from "${importPrefix}UI5Element.js";
+	${importForControl(controlName, hasTypes)}
+	import type { ClassMapValue } from "${importPrefix}types.js";
+	`;
+}
+const importForControl = (controlName, hasTypes) => {
+
+	if (!hasTypes) {
+		return `type ${controlName} = any;`;
+	}
 
+	if (process.env.UI5_BASE) {
+		// base package has a component in `test/elements` instead of `src`
+		return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
+	}
+	return `import type ${controlName} from "../../${controlName}.js";`
+}
+
+const buildRenderer = (controlName, litTemplate, hasTypes) => {
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
+	return `/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
+${tsImports(controlName, hasTypes)}
 ${litTemplate}
 
 export default block0;`;
@@ -9,4 +37,4 @@ export default block0;`;
 
 module.exports = {
 	generateTemplate: buildRenderer
-};
+};

package/lib/hbs2ui5/index.js

@@ -1,10 +1,13 @@
 const fs = require('fs').promises;
+const existsSync = require('fs').existsSync;
 const getopts = require('getopts');
 const hbs2lit = require('../hbs2lit');
 const path = require('path');
 const litRenderer = require('./RenderTemplates/LitRenderer');
 const recursiveReadDir = require("recursive-readdir");
 
+let missingTypesReported = false;
+
 const args = getopts(process.argv.slice(2), {
 	alias: {
 		o: 'output',
@@ -23,13 +26,27 @@ const onError = (place) => {
 
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 
+const hasTypes = (file, componentName) => {
+	const tsFile = path.join(path.dirname(file), componentName + ".ts")
+	const dtsFile = path.join(path.dirname(file), componentName + ".d.ts")
+	return existsSync(tsFile) || existsSync(dtsFile);
+}
+
 const processFile = async (file, outputDir) => {
-	const litCode = await hbs2lit(file);
-	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
+	const componentHasTypes = hasTypes(file, componentName);
+	if (!componentHasTypes) { 
+		if (!missingTypesReported) {
+			console.warn("[Warn] The following templates do not have a corresponging .ts or .d.ts file and won't be type checked:")
+			missingTypesReported = true;
+		}
+		console.log("  -> " + componentName + ".hbs");
+	}
+	const litCode = await hbs2lit(file, componentName);
+	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 
-	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
 };
 
 const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -70,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
 
 		await fs.mkdir(outputDir, { recursive: true });
 
-		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
+		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
 
 		// strip DOS line endings because the break the source maps
 		let fileContentUnix = fileContent.replace(/\r\n/g, "\n");

package/lib/i18n/toJSON.js

@@ -34,7 +34,7 @@ const convertToJSON = async (file) => {
 const generate = async () => {
 	const { globby } = await import("globby");
 	await fs.mkdir(messagesJSONDist, { recursive: true });
-	const files = await globby(messagesBundles);
+	const files = await globby(messagesBundles.replace(/\\/g, "/"));
 	return Promise.all(files.map(convertToJSON));
 };
 

package/lib/jsdoc/preprocess.js

@@ -8,7 +8,7 @@ const sourceDir = process.argv[3];
 const preprocessTypes = async () => {
 	try {
 		const { globby } = await import("globby");
-		const fileNames = await globby(inputDir + "**/types/*.js");
+		const fileNames = await globby(inputDir.replace(/\\/g, "/") + "**/types/*.js");
 
 		return Promise.all(fileNames.map(processTypeFile));
 	} catch(e) {
@@ -63,7 +63,7 @@ const preprocessComponents = async () => {
 
 	try {
 		const { globby } = await import("globby");
-		const fileNames = await globby(sourceDir + "/*.ts");
+		const fileNames = await globby(sourceDir.replace(/\\/g, "/") + "/*.ts");
 
 		return Promise.all(fileNames.map(processComponentFile));
 	} catch(e) {

package/lib/postcss-css-to-esm/index.js

@@ -70,7 +70,7 @@ module.exports = function (opts) {
 			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 = "";
@@ -80,7 +80,7 @@ module.exports = function (opts) {
 				// file not found
 			}
 
-			const content = getFileContent(tsMode, filePath, packageName, css, includeDefaultTheme);
+			const content = getFileContent(tsMode, targetFile, packageName, css, includeDefaultTheme);
 			if (content !== oldContent) {
 				fs.writeFileSync(filePath, content);
 			}

package/lib/replace-global-core/index.js

@@ -16,7 +16,7 @@ const replaceGlobalCoreUsage = async (srcPath) => {
 
 const generate = async () => {
 	const { globby } = await import("globby");
-	const fileNames = await globby(basePath + "**/*.js");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
 	return Promise.all(fileNames.map(replaceGlobalCoreUsage).filter(x => !!x));
 };
 

package/lib/test-runner/test-runner.js

@@ -1,6 +1,7 @@
 const child_process = require("child_process");
 const { readFileSync } = require("fs");
 const path = require("path");
+const fs = require("fs");
 
 // search for dev-server port 
 // start in current folder
@@ -23,7 +24,7 @@ while (true) {
 // check if we are in a monorepo and extract path from package.json
 let packageRepositoryPath = "";
 const pkg = require(path.join(process.cwd(), "package.json"));
-packageRepositoryPath = pkg.repository.directory;
+packageRepositoryPath = pkg.repository ? pkg.repository.directory : "";
 
 // construct base url
 // use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
@@ -57,7 +58,14 @@ if (process.argv.length > 3) {
     restParams = process.argv.slice(2).join(" ");
 }
 
+let wdioConfig = "";
+if (fs.existsSync("config/wdio.conf.cjs")) {
+    wdioConfig = "config/wdio.conf.cjs";
+} else if (fs.existsSync("config/wdio.conf.js")) {
+    wdioConfig = "config/wdio.conf.js";
+}
+
 // run wdio with calculated parameters
-const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
+const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
 console.log(`executing: ${cmd}`);
 child_process.execSync(cmd, {stdio: 'inherit'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-974b11d82",
+  "version": "0.0.0-97db186fd",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -52,11 +52,13 @@
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
+    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
     "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
@@ -67,7 +69,13 @@
     "zx": "^4.3.0"
   },
   "peerDependencies": {
-    "chromedriver": "*"
+    "chromedriver": "*",
+    "typescript": "^4.9.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "yargs": "^17.5.1"