chore: add config for template suffix and tag prefix in component generation (#11954)

Add support for `UI5_TAG_NAME_PREFIX` and `UI5_TEMPLATE_FILENAME_SUFFIX` environment variables, which can be used in third-party repositories to configure the tag name prefix and template filename.

* `UI5_TAG_NAME_PREFIX` controls the tag name format: `{custom-prefix}-component-name`, with a default fallback to `"my"`.
* `UI5_TEMPLATE_FILENAME_SUFFIX` controls the template filename format: `ComponentName{custom-suffix}.tsx`, with a default fallback to `"Template"`.

Fixes: #11523

Author: nnaydenow

docs/4-development/01-package.md

@@ -91,6 +91,13 @@ The initialization script will create several NPM scripts for you in `package.js
 | test               | Run the dev server and execute the specs from the `test/specs/` directory.   |
 | create-ui5-element | Create an empty Web Component with the given name.                           |
 
+
+**Note**: The `create-ui5-element` command supports two optional environment variables that customize the output when used in a specific component package:
+
+* **UI5_TAG_NAME_PREFIX** - sets the tag name prefix for the generated Web Component. The resulting tag will follow the format: `{UI5_TAG_NAME_PREFIX}-component-name`. Defaults to `my` if not specified.
+
+* **UI5_TEMPLATE_FILENAME_SUFFIX** - sets the suffix for the generated template filename. The resulting filename will follow the format: `ComponentName{UI5_TEMPLATE_FILENAME_SUFFIX}.tsx`. Defaults to `Template` if not specified.
+
 ### Files in the main directory
 
 The initialization script will create several files in your package's main directory.

packages/tools/lib/create-new-component/index.js

@@ -2,6 +2,8 @@ const fs = require("fs");
 const prompts = require("prompts");
 const Component = require("./Component.js");
 const ComponentTemplate= require("./ComponentTemplate.js");
+const dotenv = require('dotenv');
+dotenv.config();
 
 /**
  * Hyphanates the given PascalCase string and adds prefix, f.e.:
@@ -11,7 +13,7 @@ const ComponentTemplate= require("./ComponentTemplate.js");
 const hyphaneteComponentName = (componentName) => {
 	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
 
-	return `my-${result}`;
+	return `${process.env.UI5_TAG_NAME_PREFIX ?? "my"}-${result}`;
 };
 
 /**
@@ -62,7 +64,7 @@ const generateFiles = (componentName, tagName, library, packageName) => {
 	const filePaths = {
 		"main": `./src/${componentName}.ts`,
 		"css": `./src/themes/${componentName}.css`,
-		"template": `./src/${componentName}Template.tsx`,
+		"template": `./src/${componentName}${process.env.UI5_TEMPLATE_FILENAME_SUFFIX ?? "Template"}.tsx`,
 	};
 
 	fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });

packages/tools/package.json

@@ -41,6 +41,7 @@
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "custom-element-jet-brains-integration": "^1.4.4",
+    "dotenv": "^16.5.0",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",

yarn.lock

@@ -8630,6 +8630,11 @@ dotenv@^16.3.0, dotenv@^16.4.5:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
+dotenv@^16.5.0:
+  version "16.5.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.5.0.tgz#092b49f25f808f020050051d1ff258e404c78692"
+  integrity sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==
+
 dotenv@~16.3.1:
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.2.tgz#3cb611ce5a63002dbabf7c281bc331f69d28f03f"