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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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.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/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.0",
   "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": "17869d45f20b28009feaac9d6f59054ba530b3ae"
 }