chore: improve generating new package and component scripts (#11420)

- Move the bundle from the root folder to the `src` folder and update the test page to use Vite environment variables for resolving the bundle path.
- Remove the `componentName` and `tagName` options from both the CLI and the configuration wizard.
- Update the test specification file to use the correct tag for the initially created component, replacing the previously "hardcoded-button" tag with the component's actual tag.
- Ensure that all new components are generated with the `my-` prefix, maintaining consistent naming whether the component name is a single word or multiple words.

Author: nnaydenow

packages/create-package/README.md

@@ -16,8 +16,6 @@ Usage:
 
 Options:
     --name <string>                      - defines the package name
-    --component-name <string>            - defines the component class name that will be created in your new package
-    --tag <string>                       - defines the tag name of the sample web component that will be created in your new package
     --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
     --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```
@@ -32,8 +30,6 @@ Usage:
     yarn create @ui5/webcomponents-package [OPTIONS]
 Options:
     --name <string>                      - defines the package name
-    --component-name <string>            - defines the component class name that will be created in your new package
-    --tag <string>                       - defines the tag name of the sample web component that will be created in your new package
     --test-setup <"cypress" | "manual">  - defines whether the predefined test setup should be added or it will be configured manually.
     --skip                               - skips configuration and generates package with a default value for each parameter that wasn't passed
 ```

packages/create-package/create-package.js

@@ -21,23 +21,21 @@ const SUPPORTED_TEST_SETUPS = ["cypress", "manual"];
 const SRC_DIR = path.join(__dirname, "template");
 const FILES_TO_RENAME = {
 	"npmrc": ".npmrc",
+	"env": ".env",
 	"gitignore": ".gitignore",
 	"tsconfig.template.json": "tsconfig.json",
 	"cypress/tsconfig.template.json": "cypress/tsconfig.json"
 };
 const FILES_TO_COPY = ["test/pages/img/logo.png"];
 
 // Validation Patterns
-const ComponentNamePattern = /^[A-Z][A-Za-z0-9]+$/;
 const PackageNamePattern =
 	/^(@[a-z0-9-~][a-z0-9-._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
 const TagPattern = /^[a-z0-9]+?-[a-zA-Z0-9\-_]+?[a-z0-9]$/;
 
 // Utility Functions
 const isPackageNameValid = name =>
 	typeof name === "string" && PackageNamePattern.test(name);
-const isComponentNameValid = name =>
-	typeof name === "string" && ComponentNamePattern.test(name);
 const isTagValid = tag => typeof tag === "string" && TagPattern.test(tag);
 const isTestSetupValid = setup =>
 	typeof setup === "string" && SUPPORTED_TEST_SETUPS.includes(setup);
@@ -75,7 +73,7 @@ const generateFilesContent = async (
 				: "",
 		INIT_PACKAGE_CYPRESS_DEV_DEPS:
 			testSetup === "cypress"
-				? `"@ui5/cypress-ct-ui5-webc": "^0.0.3",\n"cypress": "^13.11.0",`
+				? `"@ui5/cypress-ct-ui5-webc": "^0.0.4",\n"cypress": "^13.11.0",`
 				: "",
 		INIT_PACKAGE_CYPRESS_TEST_COMMANDS:
 			testSetup === "cypress"
@@ -176,26 +174,14 @@ const createWebcomponentsPackage = async () => {
 		);
 	}
 
-	if (argv.componentName && !isComponentNameValid(argv.componentName)) {
-		throw new Error(
-			"The component name should be a string, starting with a capital letter [A-Z][a-z], for example: Button, MyButton, etc.",
-		);
-	}
-
-	if (argv.tag && !isTagValid(argv.tag)) {
-		throw new Error(
-			"The tag should be in kebab-case (f.e my-component) and it can't be a single word.",
-		);
-	}
-
 	if (argv.testSetup && !isTestSetupValid(argv.testSetup)) {
 		throw new Error(
 			`The test setup should be a string and one of the following options: ${SUPPORTED_TEST_SETUPS.join(", ")}`,
 		);
 	}
 
 	let packageName = argv.name || "my-package";
-	let componentName = argv.componentName || "MyComponent";
+	let componentName = "MyComponent";
 	let testSetup = argv.testSetup || "manual";
 	const skipSubfolder = !!argv.skipSubfolder;
 
@@ -221,20 +207,6 @@ const createWebcomponentsPackage = async () => {
 		packageName = response.name;
 	}
 
-	if (!argv.componentName) {
-		response = await prompts({
-			type: "text",
-			name: "componentName",
-			message: "Component name:",
-			initial: "MyComponent",
-			validate: value =>
-				isComponentNameValid(value)
-					? true
-					: "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
-		});
-		componentName = response.componentName;
-	}
-
 	if (!argv.testSetup) {
 		response = await prompts({
 			type: "select",

packages/create-package/template/cypress/component/MyFirstComponent.cy.tsx

@@ -4,10 +4,10 @@ describe('{{INIT_PACKAGE_VAR_CLASS_NAME}}.cy.tsx', () => {
   it('playground', () => {
     cy.mount(<{{INIT_PACKAGE_VAR_CLASS_NAME}} />)
 
-    cy.get("[hardcoded-button]")
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
       .click();
 
-    cy.get("[hardcoded-button]")
+    cy.get("[{{INIT_PACKAGE_VAR_TAG}}]")
       .should("have.prop", "count", 1)
   })
 })

packages/create-package/template/env

@@ -0,0 +1 @@
+VITE_BUNDLE_PATH="../../dist/bundle.esm.js"

packages/create-package/template/bundle.esm.js renamed to packages/create-package/template/src/bundle.esm.ts

@@ -9,11 +9,12 @@ import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/confi
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 
 // Enable additional themes and i18n texts
-import "./dist/Assets.js";
+import "./Assets.js";
 
-// Import your web components here from the dist/ directory
-import "./dist/{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
+// Import your web components here from the src/ directory
+import "./{{INIT_PACKAGE_VAR_CLASS_NAME}}.js";
 
+// @ts-expect-error
 window["sap-ui-webcomponents-bundle"] = {
 	renderFinished,
 	configuration: {

packages/create-package/template/test/pages/index.html

@@ -16,7 +16,7 @@
 	</script>
 
 	<link rel="stylesheet" type="text/css" href="./css/index.css">
-	<script src="../../bundle.esm.js" type="module"></script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 </head>
 
 <body>

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

@@ -4,14 +4,14 @@ const Component = require("./Component.js");
 const ComponentTemplate= require("./ComponentTemplate.js");
 
 /**
- * Hyphanates the given PascalCase string, f.e.:
- * Foo -> "my-foo" (adds preffix)
- * FooBar -> "foo-bar"
+ * Hyphanates the given PascalCase string and adds prefix, f.e.:
+ * Foo -> "my-foo"
+ * FooBar -> "my-foo-bar"
  */
 const hyphaneteComponentName = (componentName) => {
 	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
 
-	return result.includes("-") ? result : `my-${result}`;
+	return `my-${result}`;
 };
 
 /**
@@ -75,7 +75,7 @@ const generateFiles = (componentName, tagName, library, packageName) => {
 
 	// Change the color of the output
 	console.warn('\x1b[33m%s\x1b[0m', `
-Now, import the component via: "import ${componentName} from ./${componentName}.js";
+Now, import the component via: "import ${componentName} from "./${componentName}.js";
 And, add it to your HTML: <${tagName}></${tagName}>.`);
 }