@ui5/webcomponents-tools 2.5.0 → 2.6.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
+
+
+### Features
+
+* **framework:** add JSX template support with TypeScript ([#10046](https://github.com/SAP/ui5-webcomponents/issues/10046)) ([f42e7c1](https://github.com/SAP/ui5-webcomponents/commit/f42e7c18c846f923df4fec6ae02f1b4c20c006fa))
+
+
+
+
+
 # [2.5.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.3...v2.5.0) (2024-12-05)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/components-package/eslint.js

@@ -3,10 +3,11 @@ const path = require("path");
 const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
 
 /**
- * Typescript Rules
+ * Returns eslint rules specific to typescript files
+ * @returns 
  */
-const overrides = tsMode ? [
-	{
+const getTsModeOverrides = () => {	
+	const tsConfiguration = {
 		files: ["*.ts"],
 		parser: "@typescript-eslint/parser",
 		plugins: ["@typescript-eslint"],
@@ -36,8 +37,22 @@ const overrides = tsMode ? [
 			"@typescript-eslint/no-empty-interface": "off",
 			"lines-between-class-members": "off",
 		}
-	},
-	{
+	};
+
+	const tsxConfiguration = JSON.parse(JSON.stringify(tsConfiguration));
+	tsxConfiguration.files = ["*.tsx"];
+	tsxConfiguration.rules = {
+		...tsxConfiguration.rules,
+		"@typescript-eslint/unbound-method": "off", // to be able to attach on* listeners
+		"@typescript-eslint/no-misused-promises": "off", // to be able to have async event listeners
+		"operator-linebreak": "off",
+		"no-nested-ternary": "off",
+		"implicit-arrow-linebreak": "off",
+		"function-paren-newline": "off",
+		"comma-dangle": "off"
+	};
+
+	const cypressConfiguration = {
 		"files": ["**/cypress/**/*.ts"],
 
 		"plugins": [
@@ -69,7 +84,13 @@ const overrides = tsMode ? [
 			]
 		}
 	}
-] : [];
+
+	return [
+		tsConfiguration,
+		tsxConfiguration,
+		cypressConfiguration,
+	];
+}
 
 module.exports = {
 	"env": {
@@ -78,7 +99,7 @@ module.exports = {
 	},
 	"root": true,
 	"extends": "airbnb-base",
-	overrides,
+	"overrides": tsMode ? getTsModeOverrides() : [],
 	"parserOptions": {
 		"ecmaVersion": 2018,
 		"sourceType": "module"
@@ -121,6 +142,7 @@ module.exports = {
 		"curly": [2, "all"],
 		// "default-case": 1, // removed for UI5 WebComponents
 		"import/extensions": ["error", "always"], // override for UI5 WebComponents
+		"import/order": "off",
 		"no-alert": 2,
 		"no-caller": 2,
 		"no-div-regex": 2,

package/lib/cem/utils.mjs

@@ -156,12 +156,22 @@ const findImportPath = (ts, sourceFile, typeName, modulePath) => {
                     ?.replace("src", "dist")?.replace(".ts", ".js") || undefined
             );
         } else {
-            const packageName = Object.keys(packageJSON?.dependencies || {}).find(
-                (dependency) =>
-                    currentModuleSpecifier?.text?.startsWith(dependency)
-            );
-            return currentModuleSpecifier?.text
-                ?.replace(`${packageName}/`, "") || undefined;
+            // my-package/test
+            // my-package
+            // @scope/my-package
+            // my.package
+            // _mypackage
+            // mypackage-
+            // scope/my-package/test
+            // @scope/my-package/test
+            const match = currentModuleSpecifier?.text.match(/^((@([a-z0-9._-]+)\/)?([a-z0-9._-]+))/);
+            let packageName;
+
+            if (match) {
+                packageName = match[1];
+            }
+
+            return packageName || undefined;
         }
     }
 };

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

@@ -28,7 +28,7 @@ let customPlugin = {
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

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

@@ -42,16 +42,11 @@ let scopingPlugin = {
                 // 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}));
+                writeFileIfChanged(jsonPath, JSON.stringify(newText));
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

package/lib/css-processors/shared.mjs

@@ -47,30 +47,10 @@ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () =>
 `;
 };
 
-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 getFileContent = (packageName, css, includeDefaultTheme) => {
 	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;
-	`;
+	return `${defaultTheme}export default ${css.trim()}`
 }
 
-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/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -24,15 +24,20 @@ const importForControl = (controlName, hasTypes) => {
 }
 
 const buildRenderer = (controlName, litTemplate, hasTypes) => {
-	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/"
+	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/";
+
+	const mainTemplateFunction = process.env.UI5_TS ?
+		`function template(this: ${controlName}) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }` :
+		`function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }`;
 
 	// 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";
+import { getCustomElementsScopingSuffix } from "${importPrefix}CustomElementsScopeUtils.js";
 ${tsImports(controlName, hasTypes)}
 ${litTemplate}
-
-export default block0;`;
+${mainTemplateFunction}
+export default template;`;
 };
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.5.0",
+  "version": "2.6.0-rc.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -86,5 +86,5 @@
     "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   },
-  "gitHead": "fcedbbfe572884f193b3f8900b16931b51a5c48d"
+  "gitHead": "f002a980bcb67a9eb7135c887a4c94c7378a6918"
 }

package/tsconfig.json

@@ -12,5 +12,7 @@
 		"inlineSources": true,
 		"strict": true,
 		"moduleResolution": "node",
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
 	}
 }