diff --git a/docs/4-development/01-package.md b/docs/4-development/01-package.md index 0d2dfdf56ead..8ff658d3cb16 100644 --- a/docs/4-development/01-package.md +++ b/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. diff --git a/packages/tools/lib/create-new-component/index.js b/packages/tools/lib/create-new-component/index.js index c7dbe58511ce..92e6f072591c 100644 --- a/packages/tools/lib/create-new-component/index.js +++ b/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+" }); diff --git a/packages/tools/package.json b/packages/tools/package.json index a5a599abfafe..af708a142e44 100644 --- a/packages/tools/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 9e6f4dd659fd..78b006750217 100644 --- a/yarn.lock +++ b/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"